CSS笔记07 - CSS 的背景

1.背景的属性

• 背景颜色
• 背景图片
• 背景平铺
• 背景图片位置
• 背景图像固定等

2.背景颜色
语法:

/* 背景颜色透明色 */
background-color: transparent;

demo:

        .k1{
            /* 设置边框1px 实线 */
            border: 1px solid;
            /* 背景颜色透明色 */
            background-color: transparent;
        }
        .k2{
            /* 设置边框1px 实线 */
            border: 1px solid;
            /* 设置背景颜色为红色 */
            background-color: red;
        }

    <div class="k1">块元素</div>
    <div class="k2">块元素</div>

效果:

3.背景图片
作用：

• 开发logo
• 一些装饰性的小图片
• 超大的背景图片

语法：

background-image : none | url (url)

demo：

        div {
            /* 高度300px */
            height: 300px;
            /* 宽度300px */
            width: 300px;
            /* 设置背景图片 */
            background-image: url("../img/1.png");
        }

    <div>背景图片</div>

效果：

4.背景平铺
语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

demo：

        div {
            height: 500px;
            width: 500px;
            /* 背景图片可以和背景颜色一起使用，只不过背景图片会压着背景颜色 */
            background-color: pink;
            background-image: url("../img/1.png");
            /* 1.背景平铺 */
            /* background-repeat: repeat; */
            /* 2.背景不平铺 */
            /* background-repeat: no-repeat; */
            /* 3.背景沿x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4.背景沿y轴平铺 */
            background-repeat: repeat-y;
        }

    <div>背景平铺</div>

测试结果：

5.背景位置

语法：

background-position: x y;

• x代表x坐标，y代表y坐标
• 可以使用方位名词或者精确单位
• length：百分数 | 由浮点数和单位标识组成的长度值
• position：top、center、bottom、left、right 方位名词
• 参数是方位名词: 如果指定的两个值都是方位名词,则这两个值前后顺序无关;如果只指定一个方位名词,则另外一个默认居中对齐
• 参数是精确单位: 第一个是x轴,第二个是y轴;只指定一个数值,则代表x轴,y轴默认垂直居中
• 参数混合使用:第一个代表x轴,第二个代表y轴

方位demo：

        div {
            height: 500px;
            width: 500px;
            /* 背景颜色 */
            background-color: pink;
            /* 背景图片 */
            background-image: url("../img/1.png");
            /* 背景平铺 */
            background-repeat: no-repeat;
            /* 背景位置：方位 */
            background-position: center center;
        }

    <div>背景位置-方位</div>

效果：

精确单位demo:

        div {
            height: 500px;
            width: 500px;
            background-color: red;
            /* 背景图片 */
            background-image: url(../img/128.png);
            /* 背景平铺:不重复 */
            background-repeat: no-repeat;
            /* 1.背景位置,x轴50px,y轴100px */
            /* background-position: 50px 100px; */
            /* 2.背景位置:x轴100px,y轴水平居中 */
            background-position: 100px;
        }

    <div></div>

效果:

6.背景固定
语法:

background-attachment : scroll | fixed

• srcoll:滚动,默认值
• fixed:固定

demo:

        div {
            /* 背景图片 */
            background-image: url(../img/1.png);
            /* 背景平铺:不重复 */
            background-repeat: no-repeat;
            /* 背景固定:固定 */
            background-attachment: fixed;
        }

    <div>
        <p>1</p>
        <p>2</p>
    	/* 注:以下省略48个p标签 */
    </div>

效果:

7.背景复合写法
语法:
没有固定顺序,提倡的顺序

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

demo:

        div {
            /* 背景:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置*/
            background: #fff url(../img/1.png) no-repeat fixed center center;
        }

 <div>
        <p>1</p>
        <!-- 此处省略49个p标签 -->        
 </div>       

效果:

8.背景色半透明
语法:

background: rgba($red, $green, $blue, $alpha)

• 这是css3新增的属性,IE9+版本的浏览器才兼容
• 背景半透明是指盒子的背景半透明,盒子里面的内容不受影响
• 最后一个参数alpha透明度,取值0-1之间,越靠近0越透明

demo:

        div {
            height: 300px;
            width: 300px;
            background: rgba(0, 0, 0, .6);
        }

    <div>内容不被覆盖</div>

效果: