LinHuijuan's Blog

CSS背景

# CSS背景

# 前言

background这个属性有很多子属性，不过平时主要就用到background-color、background-image和background-repeat三个属性。而其他属性由于不熟悉，每次使用都得翻阅文档并且还不太确定使用是否恰当。借此小册学习机会，容我好好缕一缕。

# 一、基础知识

# 1.1 子属性

background-position: 背景图像起始位置，默认0% 0%。

/* 位置:第二个位置不声明默认是50% */
background: 100px 100px;
/* 关键字:第二个位置不声明默认是center */
background: left top;
1
2
3
4

background-size: 背景图像尺寸模式，默认auto自动设置尺寸。

/* 尺寸:第二个尺寸不声明默认是auto */
background-size: 100px 100px;
/* 图像扩展至足够大，使其完全覆盖整个区域，图像某些部分也许无法显示在区域中 */
background-size: cover;
/* 图像扩展至最大尺寸，使其宽度和高度完全适应整个区域 */
background-size: contain;
1
2
3
4
5
6

background-origin:定位区域，默认padding-box，图像相对填充定位。

/* 图像相对边框定位 */
background-origin: border-box;
/* 图像相对内容定位 */
background-origin: contenet-box;
1
2
3
4

background-clip:绘制区域，默认border-box,图像被裁剪到边框与边距的交界处。

/* 图像被裁剪到填充与边框的交界处 */
background-clip: padding-box;
/* 图像被裁剪到内容与填充的交界处 */
background-clip: content-box;
1
2
3
4

background-attachment:图像依附方式,默认scroll，图像随页面滚动而移动。

/* 图像不会随页面滚动而移动 */
background-attachment: fixed;
1
2

# 1.2 简写

background子属性连写顺序并无强制标准。

# 1.2.1 position和size在连写时使用/衔接起来

因为position和size都能使用长度单位作为值，通用格式position/size。

.elem {
    background: center/100px 100px;
}
1
2
3

若只出现一组长度单位，默认声明的是position。

/* background-position: 背景图像起始位置 */
.ele {
    background: 100px 100px;
}

/* background-size: 背景图像尺寸模式 */
.ele {
    background-size: 100px 100px;
}
1
2
3
4
5
6
7
8
9

# 1.2.2 origin和clip不能加入到属性连写中

因为两者取值一致。浏览器无法区分。

# 二、效果实现

# 2.1 灵活的背景定位

倘若背景图片需要基于容器右下角进行偏移，但是CSS2是需要我们计算出背景图片距离左上角的偏移量，再赋值给background-position。而CSS3支持在偏移量前面指定关键字。

background: red url("../assets/images/dect_mgt.jpg") no-repeat bottom 20px right 20px;
1

image.png

# 2.2 条纹背景

如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。

background: linear-gradient(rgb(221, 184, 184) 50%,rgb(103, 103, 179) 50%);
background-size: 100% 10px;
1
2

image.png

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要 小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

基于此，以下代码也能实现相同的效果。

background: linear-gradient(rgb(221, 184, 184) 50%,rgb(103, 103, 179) 0);
background-size: 100% 10px;
1
2

# 2.3 复杂的背景图案

用 CSS 渐变及background-image来创建任何种类的几何图案。

/* 波点 */
background: #000;
background-image: radial-gradient(#fff 30%, transparent 0), radial-gradient(#fff 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
1
2
3
4
5

image.png

利用圆锥渐变conic-gradient实现棋盘布局，比线性渐变方便多了。

/* 棋盘 */
background: #eee;
background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
background-size: 30px 30px;
1
2
3
4

image.png

# 2.4 多重背景

给图片加个遮罩。

background: 
    linear-gradient(135deg,rgba(88, 90, 84, 0.5),rgba(73, 77, 71, 0.5)),url("../assets/images/dect_mgt.jpg") center/cover no-repeat;
1
2

image.png

# 2.5 动态的渐变背景

摘抄自小册。 声明linear-gradient()产生从左上角往右下角的渐变效果，将背景定位在左边，通过animation控制背景定位左右徘徊产生动态的渐变背景。

.gradient-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) left center/400% 400%;
    font-weight: bold;
    font-size: 100px;
    color: #fff;
    animation: move 10s infinite;
}
@keyframes move {
    0%,
    100% {
        background-position-x: left;
    }
    50% {
        background-position-x: right;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 总结

倘若真正的掌握了CSS背景的各种属性和用法，真的是可以当画布画画了。

BFC