六、背景

发表于 | 更新于: | 分类于 ， |
| 字数: 1.3k | 时长 ≈ 5 分钟

六、背景

1
2
3
4
5
background-color： 背景色
background-image： 背景图
background-repeat： 背景图是否重复
background-position： 背景位置
background-attachment： 背景是否滚动

6.1 背景起源origin

background-origin： content-box；（内容盒）

不设置content-box背景图默认背景起源位置是border以内。

NUh3VJ.png

设置content-box 背景图显示在内容盒以内。

1
2
padding: 50px;
background-origin: content-box;

NUhUxK.png

background-position：背景图相对于背景起源位置的偏移（向右10px 向下50px）

1
background-position: 10px 50px;

NUh5ZQ.png

6.2 背景裁切 clip

background-clip：content-box；

表示将其他区域的背景裁切掉，只剩下内容盒背景图

1
2
3
background: url(images/people.png);
            background-origin: content-box; 
            background-clip: content-box;

NU4iz6.png

等价写法：合并书写（未写no-repeat）

1
background: url(images/people.png) content-box;

6.3 背景尺寸 size

background-size：背景宽度 背景高度；

调整背景图片尺寸，只写宽等比例调，宽高都写则使图片按照需要宽高尺寸调整。

6.3.1 像素表示法：

1
background-size: 400px 500px;

NU41Qf.png

6.3.2 百分数表示法

background-size：背景图宽度相对于大背景宽度比值 背景图高度相对于大背景高度比值；

1
background-size: 50% 25%;

NUj36J.png

6.3.3 单词表示法

6.3.3.1 cover（覆盖，尽可能大）

背景图一定可以将大背景都覆盖住，并且背景图不会变形，等比例放大或缩小。背景图可能显示不完整。

1
background-size: cover;

NUjUk6.png

6.3.3.2 contain（容纳，显示背景图的全部）

背景图一定可以显示完整，并且背景图不会变形，等比例放大或缩小。大背景可能会留白。

1
background-size: contain;

NUjrXd.png

6.3.4 结合精灵图的使用

background-size 结合精灵图的使用：

①盒子宽高放大或缩小

②背景图放大或缩小 background-size

③精灵图位置放大或缩小background-position

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*原精灵图*/
.box {
            /* 1 限制盒子宽高 */
           width: 110px;
           height: 35px;
           background-image: url(images/index-sprites9.png);
            /* 2 通过background-position 得到任意精灵图 */
            background-position: -60px -50px;
            margin: 50px auto;

.box1 {
            /* 让精灵图缩小一半显示 */
            /* 1 盒子宽高减半 */
            /* 2 背景图减半 background-size */
            /* 3 background-position减半 */
            width: 55px;
            height: 17.5px;
            background-image: url(images/index-sprites9.png);
            background-size: 100px 100px;
            background-position: -30px -25px;
            margin: 50px auto;
        }

.box2 {
            /* 让精灵图放大一倍显示 */
            /* 1 盒子宽高放大 */
            /* 2 背景图放大 background-size */
            /* 3 background-position放大 */
            width: 220px;
            height: 70px;
            background-image: url(images/index-sprites9.png);
            background-size: 400px 400px;
            background-position: -120px -100px;
            margin: 50px auto;
        }

NUjWh8.png

6.4 背景渐变

背景渐变使用的是background-image，而不是background-color

css3新的属性或者属性值处于试验阶段会添加浏览器前缀。

1
2
3
4
Chrome，Safari   -webkit-
firefox           -moz-
IE               -ms-
opera            -o-

线性渐变：

linear 线性

gradient 渐变

1
background-image: -前缀-linear-gradient(渐变起始方向,渐变颜色,渐变颜色,……);

处于试验阶段完整写法：

1
2
3
4
5
6
7
8
9
10
11
/* 渐变 上面是红色下面是绿色 （渐变处于试验阶段属性值，各浏览器都要加前缀） */
/* 谷歌 Chrome 苹果 Safari 加前缀 -webkit- */
background-image: -webkit-linear-gradient(top,red,green);
/* 火狐 firefox 加前缀 -moz- */
background-image: -moz-linear-gradient(top,red,green);
/* IE  加前缀 -ms- */
background-image: -ms-linear-gradient(top,red,green);
/* 欧朋 Opera 加前缀 -o- */
background-image: -o-linear-gradient(top,red,green);
/* 当不处于试验阶段时，没有前缀 */
background-image: linear-gradient(top,red,green);

NUvk4K.png

第一个参数：渐变开始方向（只需要写开始的方向，不要写结束方向）

左上角：top left

1
background-image: -webkit-linear-gradient(top left,orange,pink);

NUvZge.png

第二个参数：渐变颜色，可以用逗号隔开书写多个颜色

1
background-image: -webkit-linear-gradient(right,orange,pink,green,red);

NUvKHI.png

颜色后面可以用空格隔开百分数，表示该颜色在整体渐变中出现的位置。

1
2
3
background-image: -webkit-linear-gradient(left,blue,green,red);

background-image: -webkit-linear-gradient(left,blue 10%,green 20%,red 30%);

NUv14f.png

6.5 多背景

一个元素可以渲染多个背景，用逗号隔开

其他单一属性也可以用逗号隔开，表示对应背景图设置

1
2
3
4
5
6
7
8
9
10
11
width: 300px;
height: 300px;
border: 1px solid #000;
padding: 50px;
margin: 50px;
background: url(images/boya.png) content-box, url(images/p1.png);
background-repeat: no-repeat, no-repeat;
background-size: 100px 100px, cover;
/* 相对于背景图起源位置进行偏移 */
background-position: 20px 20px, 20px 20px;
color:blue;

NUvabn.png

6.6 综合应用

先写普通精灵图片，再写渐变。否则无法单一对应渐变调整属性值 线性渐变无法写定位位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.btn {
    /* 行内元素 转块 */
    display: block;
    width: 250px;
    height: 60px;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 50px;
    /* 先写普通精灵图片，再写渐变。否则无法单一对应渐变调整属性值 线性渐变无法写定位位置 */
    /* 放两张普通精灵图片，如果两张图片位置重合，则显示的精灵图颜色加深*/
    background-image: url(images/header-sprites13.png), url(images/header-sprites13.png), -webkit-linear-gradient(top, lightblue,blue);
    /* 线性渐变无法写定位位置 */
    background-position: right top, left bottom;
    text-align:center;
    line-height: 60px;
    color: #fff;
    font-weight:bold;
    font-size: 30px;
    /* 文字阴影 */
    text-shadow: 0px 0px 15px rgba(0,0,0,.8);
    /* 盒子阴影 */
    box-shadow: 3px 3px 20px rgba(0,0,0,.5);
    /* 过渡 */
    transition: all 1s linear 0s;
}
.btn:hover {
    background-position: left bottom, -43px -209px;
}

<!-- javascript:void(0);  点击 a 标签，不发生跳转 -->
<a href="javascript:void(0);" class="btn">按&nbsp;&nbsp;钮</a>

NUvy2F.png

相关文章
点击查看

本文标题:六、背景

文章作者:Mango

发布时间:2020年06月30日 - 21:29:47

最后更新:2020年06月30日 - 21:44:19

原始链接:https://mango185.github.io/post/6f490a8f.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️