背景图片的知识点总结
# 背景颜色

background-color:颜色值;

rgba(255,255,255,0.3)这个是设置带透明度的图片。最后一个参数就是透明度,0.3可以简写成.3

  • 默认值:transparent 透明的

背景图片

  • background-img:url(/.);

    我们一般装饰的图片都设置成 背景图片,因为位置特别好控制。

    url无需双引号""引入,默认值是none

  • 平铺background-repeat 默认值是平铺的

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-image: url(./img/logo.jpg);
        }
    </style>
    
    <body>
        <div class="box">背景图片的默认值是平铺的</div>
    </body>
    

    image-20210102230949854

    参数:

    1. repeat 平铺

    2. no-repeat 不平铺

      image-20210102231452099

    3. repeat-x 沿着x轴平铺

      image-20210102231548863

    4. repeat-y沿着y轴平铺

      image-20210102231624137

背景定位background-position

backg-position: x y(x,y 坐标)

参数 :

参数值说明
长度百分数|由浮点数和单位标识符组成的长度值
方位名词top|center|bottom|left|center|right

例如:

background-position:center center;

image-20210102232608432

  • 这个xy坐标是反过来的 y轴正方向向下

  • 注意我们在x y都使用方位名词的时候,顺序是不影响的。

  • 如果我们缺省一个参数,但是另一参数一定是center

  • 使用精确单位是有顺序要求的,第一个参数一定是 x坐标 第二个一定是y坐标

  • 可以混合用,顺要求同上

背景图像固定 (背景附着)

background-attachment:scroll|fixed;(随着内容滚动|固定)

    <style>
        body {
            height: 6000px;
            background-image: url(./img/bc.jpg);
            background-repeat: no-repeat;
            background-position: center;
            /* background-attachment: fixed; */
            background-attachment: scroll;
        }
    </style>
  1. background-attachment:fixed;背景固定在后面

    image-20210102233948959

  2. background-attachment:scroll;

    image-20210102234111325

背景的混合写法

例如background:#ffffff url('img_tree.png') no-repeat right top;

但是要求遵守如下顺序:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

结语

放假第第7天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/02/c-s-s--bei-jing-tu-pian
最后更新于:  166  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟