CSS-3：背景设置

1.背景颜色：background-color

如果不设置background-color，默认是transparent，透明的

html 复制代码

<style>
        div {
            /* background-color: transparent; */
            background-color: red;
            width: 100px;
            height: 50px;
        }
    </style>

2.背景图片background-image

background-image属性描述了元素的背景图像，实际开发常见于一些logo（标志，徽标）或者一些装饰性的小图片，或者是超大的背景图片，这个属性的优点是可以非常方便和灵活地控制图片的位置

语法：

html 复制代码

background-image: none|url(url);

属性值为none（默认）则元素没有背景图片

使用url()中要填url地址

3.背景平铺background-repeat

html 复制代码

background-repeat:repeat;

设置了平铺就说明如果图片大小比盒子小，那么就会以多张图片铺满这个盒子

属性取值：

repeat：背景图像在纵向和横向上平铺（默认）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺

4.背景图片的位置background-position

html 复制代码

backgroun-position:x y;

x,y坐标

属性值可以是方位名词，也可以是是具体的位置

如果x和y都是方位名称，则两者的前后关系不需要有顺序，如写background-position: center top;和background-position:top center;的效果都是一样的，都是水平垂直居中

如果只写一个方位名称属性值，另外一个省略，则设置的效果：若该方位名词是表示x轴的方位名称（如right右边、left左边），那么另外一个省略的就表示y轴，y轴是居中（默认）；同理如果方位名称是y轴的（若top，bottom）则省略不写的就是表示x轴的，x轴会默认居中显示

如果是精确单位，那么第一个参数值一定是x轴坐标，第二个参数一定是y轴坐标（单位px）

如果只写一个参数值，那么这个参数值表示x轴坐标，而y轴坐标默认垂直居中

注：圆点是盒子左上角

还有一种单位：混合单位，即既有精确单位，也有方位名称单位

如果是混合单位，则第一个参数值一定表示x轴方位，第二个参数值表示y轴方位

5.背景图像固定background-attachment

参数取值：

scroll：（英文意思：动词为滚屏，滚动；名称为卷轴），默认值，作用是背景图像随盒子内容滚动
fixed：背景图片固定

6.背景复合写法

为了简化背景图像设置的代码，可以使用backgroun属性来简写，各种属性值没有固定的顺序，但是一般都遵循这样的顺序：

html 复制代码

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

7.背景色半透明

html 复制代码

background: rgba(0,0,0,a)

其中a的取值为[0,1]，越靠近1越透明，越靠近0越不透明，为0就为黑色，完全不透明了

a可以理解为百分比的透明度

8.综合案例：五彩导航栏

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航栏</title>
</head>

<body>
    <div class='nav'>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>

</html>

效果：

<a>标签是行内元素，即有着默认一行显示多个元素，不能设置宽度width，不能设置高度height，不能容纳块元素的特点

但是我们想让这些链接有高度宽度的展示效果，则需要模式转换

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航栏</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            /*水平居中*/
            line-height: 58px;
            /*垂直居中，行高等于盒子的高度*/
            text-decoration: none;
            /*取消超链接文字的下划线*/
            color: #fff;
            /*文字颜色设置为白色*/
        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        /*千万要注意：选择器之间要用空格分隔，不然不会起作用*/

        .nav .bg1:hover {
            background-image: url(images/bg3.png);
        }

        .nav .bg2 {
            background-image: url(images/bg2.png);
            background-repeat: no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg4.png);
        }

        .nav .bg3 {
            background: url(images/bg3.png) no-repeat;
        }

        .nav .bg3:hover {
            background-image: url(images/bg5.png);
        }

        .nav .bg4 {
            background: url(images/bg4.png) no-repeat;
        }

        .nav .bg4:hover {
            background-image: url(images/bg1.png);
        }

        .nav .bg5 {
            background: url(images/bg5.png) no-repeat;
        }

        .nav .bg5:hover {
            background-image: url(images/bg2.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="https://www.baidu.com" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>

</html>

效果：