CSS背景颜色之奇技淫巧

3/19/2021 StyleCSS3

# 文章目录

# 一、背景

通过 CSS 背景属性,可以给页面元素添加背景样式。

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

# 1.1 背景颜色 background-color

语法:

background-color:transparent: color
1

一般情況下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色

# 1.2 背景图片 background-image

background- -image.属性描述了元素的肖景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)

语法:

background-image: none | url(url)
1

# 1.3 背景平铺 background-repeat

如果需要在 HTML 页面上对背景图像进行平铺,可以使用 background-repeat 属性。

语法:

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

注意:默认是平铺的

此外,当我们设置有背景颜色和背景图片的时候,颜色在图片之下。

div {
  width: 500px;
  height: 500px;
  background-color: teal;
  background-image: url(./media/pig.jpg);
  background-repeat: no-repeat;
}
1
2
3
4
5
6
7

效果:
在这里插入图片描述

# 1.4 背景图片位置 background-position

利用 background-position 属性可以改变图片在肯景中的位置

background-position:x y
1

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

参数值 说明
length 百分数」由浮点数字和单位标识符组成的长度值
position top

注意事项:

  • 参数是方位名词

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

    • 第一个必须是 x,第二个必须是 y
    • 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
  • 混合参数

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

示例:

div {
  width: 500px;
  height: 500px;
  background-color: teal;
  background-image: url(./media/pig.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
}
1
2
3
4
5
6
7
8

效果:background-position:left bottom;
在这里插入图片描述
background-position:center center;
在这里插入图片描述
示例:background-position: 20px 50px;

div {
  width: 500px;
  height: 500px;
  background-color: pink;
  background-image: url(./media/pig.jpg);
  background-repeat: no-repeat;
  background-position: 20px 50px;
}
1
2
3
4
5
6
7
8

效果:
在这里插入图片描述

# 1.5 背景图像固定 background-attachment

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background- attachment 后期可以制作视差滚动的效果。

语法:默认 scroll

backgroound-attachment:scroll | fixed
1

# 1.6 背景色半透明 rgba

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

# 二、总结

属性 作用
background-color 背景颜色 预定义的颜色值/十六进制/RGB 代码
background-image 背景图片 urI(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 ength/position 分别是 x 和 y 坐标
background-attachment 背景附着 scroll(肯景滚动)/ fixed(背景固定)
背景简写 书写更简单 背景颜色 背景图片 地址 背景平铺 背景滚动 背景位置
背景色半透明 背景颜色半透明 background:rgba(0,0,003): 后面必须是 4 个值
最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar