高亮的博客

# 背景图片

background-image

<body>
    <div></div>
</body>
<style> 
    div {
        background-image: url('a.png');
    }
</style>

# background-repeat 平铺

属性：

  1. repeat:背景图像在纵向和横向上平铺
  2. no-repeat：背景图像不平铺
  3. repeat-x:背景图像在横向上平铺
  4. repeat-y:背景图像在纵向平铺

# background-size 图片大小

background-size 宽 高 / 宽/高

<body>

    <div></div>
    
</body>

<style> 

    div {
        background-image: url('a.png');
        background-size: 20px 20px;
        /* 宽高都是20 */
        background-size: 20px;
        background-size: cover;
       /*    x/y 一遍拉满另一边不管   */
        background-size: contain;
    }

</style>

# background-position 图片位置

background-position： x轴 y轴; 如果省略一个参数，则另一个自动是居中

参数值 说明
length 百分数 由浮点数字和单位标识符组成的长度值
position top、center、bottom 、left、center、right方位名词
<body>

    <div></div>
    
</body>

<style> 

    div {
        background-image: url('a.png');
        background-position: center top;
        background-position: 100px;
       background-position-x: 20px;
       background-position-y: 20px;;
    }

</style>

# background-attachment背景固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
<body>

    <div class="a">
        成长守护平台
    </div>
    
</body>

<style> 
    .a {
        width: 300px;

        background-image: url("a.png");
        background-repeat: no-repeat;
        background-position: left;
        text-indent: 2em;
        background-attachment: scroll;
    }
</style>

# 颜色半透明

CSS3为我们提供了背景颜色半透明的效果。 background: rgba(0,0,0,3)
分别对应：r g b a，最后一个参数是 0-1之间

注意

背景半透明是指盒子背景半透明，盒子里面的内容不受影响 CSS3新增属性，IE9+版本浏览器才支持的

<body>

    <div class="a">
        成长守护平台
    </div>
    
</body>

<style> 
    .a {
        width: 200px;
        height: 200px;
        background-color: black;
        background: rgba(0, 0, 0, 0.3);
    }
</style>

← 浮动 →