zoukankan      html  css  js  c++  java
  • HTML+CSS之background

    第一个专题——background属性


    今天写一下background属性,具体如下:

    1.background-color:默认值:transparent,这是我们在做网页时,经常使用的属性,较为简单。对应的脚本属性:backgroundColor
    2.background-image:使用url("本地图片地址") 对应的脚本属性:backgroundImage
    3.background-repeat:
    repeat-x: 背景图像在横向上平铺
    repeat-y: 背景图像在纵向上平铺
    repeat: 背景图像在横向和纵向平铺
    no-repeat: 背景图像不平铺
    round: 背景图像自动缩放直到适应且填充满整个容器。(CSS3)
    space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)
    4.background-attachment: fixed | scroll | local
    fixed: 背景图像相对于窗体固定。
    scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
    5.background-position:
    position:[ left | center | right | top | bottom | percentage | length ] | [ left | center | right |percentage | length ] [ top | center | bottom | percentage| length ] | [ center | [ left | right ] [ percentage | length ]? ] && [ center | [ top | bottom ]
    percentage: 用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
    length: 用长度值指定背景图像填充的位置。可以为负值。
    center: 背景图像横向和纵向居中。
    left: 背景图像在横向上填充从左边开始。
    right: 背景图像在横向上填充从右边开始。
    top: 背景图像在纵向上填充从顶部开始。
    bottom: 背景图像在纵向上填充从底部开始
    6.background-size:
    bg-size = [ length | percentage | auto ]{1,2} | cover | contain
    length: 用长度值指定背景图像大小。不允许负值。
    percentage: 用百分比指定背景图像大小。不允许负值。
    auto: 背景图像的真实大小。
    cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    其实呢,还有两个属性,但是在平时很少用到,为了避免混淆,用的时候直接查文档就行了。

  • 相关阅读:
    docker 打包镜像并传输
    bytes函数——字节
    python——多线程
    Golang基础——随机数rand.Seed
    Golang基础——数据类型:数组
    property 和 setter 装饰器
    qrc文件使用
    SQL优化——索引
    mysql结构及存储引擎
    css样式重置以及定位
  • 原文地址:https://www.cnblogs.com/JameSLW-LEO/p/9549297.html
Copyright © 2011-2022 走看看