CSS背景——背景颜色、背景图片、背景平铺、背景图像位置、背景图像固定、背景图像半透明

短命女 2022-11-20 08:17 338阅读 0赞

# CSS背景 #

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

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

### 背景颜色 ###

background-color属性定义了元素的背景颜色。

background-color:颜色值;

一般情况下元素背景颜色默认值是transparent（透明）。

### 背景图片 ###

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或是超大的背景图片，优点是非常便于控制位置。

background-image: none|url(url);

none：无背景图；url：使用绝对或相对地址。

### 背景平铺 ###

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat。默认情况下背景图片是平铺的。

可以使用`background-repeat:norepeat`取消背景图像平铺。使用`background-repeat:repeat-x`使背景图像在横轴上平铺。使用`background-repeat:repeat-y`是背景图片在纵轴上平铺。

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

### 背景图片位置 ###

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

background-position:x y;

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

参数是方位名词，则两个值前后顺序无关，比如left top和 top left效果一致。如果只指定了一个方位名词，此时另一个方位是默认居中显示的。

参数是精确单位，那么第一个一定是x坐标，第二个一定是y坐标。如果只指定了一个坐标，那么一定是x坐标，y坐标默认居中。

参数是混合单位，第一个值一定是x坐标，第二个一定是y坐标。

### 背景图像固定 ###

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

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

background-attachment: scroll | fixed

scroll为默认属性，背景图像随对象内容滚动。fixed属性，背景图像固定。

### 背景属性复合性写法 ###

当使用复合写法写背景属性时，没有特定的书写顺序，一般习惯约定顺序为：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

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

### 背景颜色半透明 ###

background : rgba(0,0,0,0.5);

r:红色；g:绿色；b:蓝色；a:透明度，取值范围在0~1之间，1为百分之百不透明。

只是让盒子的背景颜色半透明，不会影响盒子中的内容。对IE9+版本的浏览器才支持，但是在实际开发中 可以大胆使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 背景图像的位置

一、background-origin 指定背景图像的位置区域 ![Center][] ![Center 1][] 二、background-clip指定绘图

谁践踏了优雅/ 2024年02月17日 20:59/ 0 赞/ 102 阅读

相关背景图片平铺（HTML、CSS）

背景图片平铺（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <me

向右看齐/ 2023年10月03日 12:45/ 0 赞/ 136 阅读

相关背景图片固定（背景图片附着）（HTML、CSS）

背景图片固定（背景图片附着）（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

桃扇骨/ 2023年10月03日 12:45/ 0 赞/ 136 阅读

相关背景图片平铺

①默认平铺 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片平铺实

港控/mmm°/ 2023年02月16日 06:06/ 0 赞/ 121 阅读

相关 CSS背景——背景颜色、背景图片、背景平铺、背景图像位置、背景图像固定、背景图像半透明

CSS背景 CSS可以通过背景属性给页面元素添加样式背景背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。背景颜色 backgro

短命女/ 2022年11月20日 08:17/ 0 赞/ 339 阅读

相关 CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)

文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定（背景附着） 6 背景复合写法 7 背景色

太过爱你忘了你带给我的痛/ 2022年11月17日 14:59/ 0 赞/ 436 阅读

相关 CSS 背景图像

CSS 背景图像文章目录 CSS 背景图像 CSS 背景图像还可以为特定元素设置背景图像 ![在这里插入图片描述][20210

- 日理万妓/ 2022年11月12日 09:38/ 0 赞/ 314 阅读

相关（CSS入门）css添加+背景图像+背景重复

css添加当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。三种使用 CSS 的方法有三种插入样式表的方法：外部css

布满荆棘的人生/ 2022年09月03日 02:29/ 0 赞/ 338 阅读

相关 CSS复习之用用 CSS 设置背景颜色和背景图像

今日目录 1、设置背景颜色 2、设置背景图像 3、设置背景图像平铺 4、设置背景图

我会带着你远行/ 2022年05月25日 10:09/ 0 赞/ 416 阅读

相关 CSS3背景图像属性

CSS3背景图像属性目录： CSS3背景图像区域 CSS3背景图像定位 CSS3背景图像大小 CSS3多重背景图像 CSS3背景属性整合

缺乏、安全感/ 2022年05月14日 08:54/ 0 赞/ 454 阅读