CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）

1. 背景颜色(color)

background-color:颜色值;   默认的值是 transparent  透明的

示例代码：

    
    
    Document
    
        div {
            background-color: red;
        }
    


    
背景颜色

2. 背景图片(image)

background-image : none | url (url) 

参数作用none无背景图（默认的）url使用绝对或相对地址指定背景图像  【url不要加引号 】

示例代码：

    
    
    Document
    
        div {
            width: 500px;
            height: 400px;
            background-color: pink;
            /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
            background-image: url(monkey.png);
        }
    


    
背景图片

3. 背景平铺（repeat）

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

参数作用repeat背景图像在纵向和横向上平铺（默认的）no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺

示例代码：

    
    
    Document
    
        div {
            width: 500px;
            height: 400px;
            background-color: pink;
            /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
            background-image: url(monkey.png);
            /*默认的是平铺图 repeat*/
            /* background-repeat: repeat; */
            /*背景图片不平铺*/
            /* background-repeat: no-repeat; */
            /*横向平铺 repeat-x*/
            /* background-repeat: repeat-x; */
            /*纵向平铺*/
            background-repeat: repeat-y;
        }
    


    
背景图片

4. 背景位置(position)

background-position : length || length

background-position : position || position 

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

注意：

• 必须先指定background-image属性

• position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

• 如果只指定了一个方位名词，另一个值默认居中对齐。

• 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y

• 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中

• 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

示例代码：

    
    
    Document
    
        div {
            width: 500px;
            height: 400px;
            background-color: pink;
            /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
            background-image: url(monkey.png);
            /*背景图片不平铺*/
            background-repeat: no-repeat;
            /*背景位置*/
            /*background-position: x坐标 y坐标;*/
			/*background-position: right top; 右上角*/
			/*background-position: left bottom; 左下角*/
			/*background-position: center center; 水平居中 垂直居中*/
			/*则两个值前后顺序无关 因为是方位名词*/
			/*background-position:  center left; */
			/*如果只指定了一个方位名词，另一个值默认居中对齐*/
			/* background-position: top; */
            /*background-position: x坐标 y坐标;*/
			/*background-position: right top; 右上角*/
			 /*那么第一个，肯定是 x 是 50   第二的一定是y 是 10*/
			/*background-position: 50px 10px ;*/
			/*以下说明  x 10像素  y 垂直居中的*/
			/*background-position: 10px center;*/
			background-position: center 10px;
        }
    


    
背景图片

小图片左侧对齐盒子案例：

示例代码：

    
    
    Document
    
        .icon {
            width: 150px;
            height: 35px;
            background-color: pink;
            font-size: 14px;
            font-weight: 500;
            line-height: 35px;
            background-image: url(logo.png);
            background-repeat: no-repeat;
            background-position: 10px center;
            text-indent: 2.5em;
        }
    


    
摄像机

 

5. 背景附着

        背景附着就是解释背景是滚动的还是固定的

background-attachment : scroll | fixed 

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

示例代码：

    
    
    Document
    
        body {
            height: 3000px;
            background-color: pink;
            background-image: url(king.jpg);
            background-repeat: no-repeat;
            /*超大背景图片的做法 背景定位*/
            background-position: center top;
            /*背景固定的*/
            background-attachment: fixed;
        }
    


    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！

6. 背景简写

background：属性的值的书写顺序官方并没有强制标准的。

可以按照这个顺序写：

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

background: transparent url(image.jpg) repeat-y  scroll center top ;

示例代码：

    
    
    Document
    
        body {
            height: 3000px;
            /* background-color: pink;
            background-image: url(king.jpg);
            background-repeat: no-repeat; */
            /*超大背景图片的做法 背景定位*/
            /* background-position: center top; */
            /*背景固定的*/
            /* background-attachment: fixed; */
            /*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
            background: pink url(king.jpg) no-repeat fixed center top;
        }
    


    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！
    
青春正能量，我要天天向上！

7. 背景透明(CSS3)

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha 透明度 取值范围 0~1之间

• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);

• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

示例代码：

    
    
    Document
    
        div {
            width: 700px;
            height: 120px;
            background-color: pink;
        }
        .demo1 {
            width: 700px;
            height: 30px;
            line-height: 30px;
        }
        .demo2 {
            width: 700px;
            height: 30px;
            background: rgba(0, 0, 0, 0.3);
        }
    


    

        
青春正能量，我要天天向上！
        
青春正能量，我要天天向上！
        
青春正能量，我要天天向上！
        
青春正能量，我要天天向上！
    

8. 链接导航栏综合案例

示例代码：

    
    
    Document
    
        .nav {
            /*让里面的6个链接 居中对齐水平  这句话对 行内元素 行内块元素都有效果的*/
            text-align: center;
        }
        .nav a {
            /*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/
            display: inline-block;
            width: 120px;
            height: 50px;
            /*行高等于盒子的高度 就可以让单行文本垂直居中*/
            line-height: 50px;
            color: #fff;
            text-decoration: none;
            /*背景简写*/
            background: url(bg.png) no-repeat;
        }
        /*鼠标经过nav里面的链接， 背景图片更换一下就好了*/
        .nav a:hover {
            background-image: url(bgc.png);
        }
    


    

        推荐
        新闻
        体育
        养生
        健康
        娱乐