CSS 背景

目录

背景颜色

背景图片

背景平铺

背景图片位置

背景设置实例

背景图像固定（背景附着）

背景复合写法

背景颜色半透明

背景总结

---

通过 CSS 背景属性，可以给页面添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

background-color 属性

定义了元素的背景颜色

div {
    background-color: 颜色值;
}

background-color：transparent（透明、无色） |  color

一般情况下元素背景颜色默认值为 transparent（透明），我们也可以设置背景颜色为透明色

背景图片

background-image 属性

描述了元素的背景图像

实际开发中常见于 logo、一些装饰性的小图片或者超大的背景图片（精灵图也是一种运用场景）

优点：非常便于控制位置

div {
    background-image: none | url(url地址)
}

div {
    width: 300px;
    height: 300px;
    background-image: url(images/chusai.png);
}

参数值	作用
none	无背景图片（默认）
url	使用绝对或相对路径指定背景图片

背景平铺

background-repeat 属性

对背景图像进行平铺设置

页面元素既可以添加背景颜色，也可以添加背景图片。不过背景图片显示在背景颜色之上

div {
    width: 300px;
    height: 300px;
    background-image: url(images/chusai.png);
    background-repeat: no-repeat;
}

参数值	作用
repeat	全局平铺(默认)
no-repeat	不平铺
repeat-x	沿着x轴平铺
repeat-y	沿着y轴平铺

背景图片位置

background-position 属性

可以改变图片在背景中的位置

div {
    width: 300px;
    height: 300px;
    background-image: url(images/chusai.png);
    background-repeat: no-repeat;
    background-position: x y;
}

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

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

1. 参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关。比如 left top 和 top left 效果一致
• 如果只指定一个方位名词，另一个省略，则第二个值默认居中对齐

背景设置实例

.div1 {
    width: 190px;
    height: 50px;
    font-size: 16px;
    color: #000;
    line-height: 25px;
    background: darkkhaki url("王者/王者1.png") no-repeat left center;
    text-indent: 3em;
}

.div2 {
    width: 1000px;
    height: 416px;
    text-align: center;
    background: url("王者/云樱.png") no-repeat center center;
    font-size: 50px;
    color: #cd995c
}

span {
    display: block;
}

.px14 {
    font-size: 14px;
}

<div class="div1">
    <span>欢迎登录</span>
    <span class="px14">登录后查看游戏战绩</span>
</div>
<div class="div2">
    燎原之心 云缨
</div>

效果图

2. 参数是精确单位

• 如果参数值是精确坐标，第一个必定是 x 坐标，第二个必定是 y 坐标
• 如果只指定一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中

div{
    width: 190px;
    height: 50px;
    font-size: 16px;
    color: #000;
    line-height: 25px;
    background: darkkhaki url("王者/王者1.png") no-repeat 20px 50px;
    text-indent: 3em;
}

3. 参数是混合单位

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

 div{
    width: 190px;
    height: 50px;
    font-size: 16px;
    color: #000;
    line-height: 25px;
    background: darkkhaki url("王者/王者1.png") no-repeat 20px center;
    text-indent: 3em;
}

背景图像固定（背景附着）

background-attachment 属性

设置背景图像是否固定或者随着页面的其余部分滚动

后期可以制作视差滚动效果

参数	作用
scroll（默认）	背景图像随着对象内容滚动
fixed	背景图像固定

/* fixed:背景图片固定 */
/* scroll:背景图片随对象内容滚动 */
/* 具体自己体会 */
div{
    background: url("王者/云樱.png") no-repeat fixed center center;
}

背景复合写法

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性 background 中，从而节约代码量

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为

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

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

div{
    background: #508fe2 url("王者/云樱.png") no-repeat fixed center center;
}

背景颜色半透明

css3 为我们提供了背景颜色半透明的效果

div{
    background: rgba(24, 42, 66, 0.8);
}

注意事项：

1. 前三个参数为 颜色的 RGB 值，即设置背景颜色
2. 最后一个参数是 alpha 透明度，取值范围在 0 ~ 1 之间
3. 0 完全透明；1 完全不透明
4. 习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3)，与原先的效果一致
5. 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
6. 英文字符半角圆角切换 shift + 空格

背景总结

属性	作用	属性值
background-color	背景颜色	预定义的颜色值 / 十六进制 / RGB代码
background-image	背景图片	url (图片路径)
background-repeat	平铺方式	repeat / no-repeat / repeat-x / repeat-y
background-position	背景位置	length / position
background-attachment	背景附着	scroll（背景滚动）/ fixed（背景固定）
背景简写	简化代码量	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景颜色半透明	background: rgba(24, 42, 66, 0.5)