1.设置背景颜色
在CSS中,网页元素的背景颜色使用background-color属性来设置
background-color:背景颜色w属性
2.设置背景图像
在CSS中,还可以将图像作为网页元素的背景,通过background-image属性实现。
background-image:背景图像属性
3.背景与图片不透明度设置
通过引入RGBA模式和opacity属性,可以设置图片的不透明度
RGBA模式rgba(r,g,alpha);
opacity属性 opacity:opacityValue;
opacity属性用于定义元素的不透明度,参数opacityValue表示不透明度的值,它是一个介于0~1之间的浮点数值。其中,0表示完全透明,1表示完全不透明,而0.5则表示半透明。
4.设置背景图像平铺
默认情况下,背景图像会自动向水平和竖直两个方向平铺

CSS基础样式盒子模型之二

5.设置背景图像位置

background-position图像位置属性

CSS基础样式盒子模型之二

6.设置背景图像固定

background-attachment图像固定属性

CSS基础样式盒子模型之二

7.设置背景图像大小

运用CSS中的background-size属性可以轻松控制图像背景大小

background-size:属性值1 属性值2

CSS基础样式盒子模型之二

8.设置背景的显示区域

运用CSS中的background-origin属性规定background-position属性是相对于什么位置来定位的

CSS基础样式盒子模型之二

9.设置背景图像的裁剪区域

在CSS中,background-clip属性用于定义背景图像的裁剪区域

background-clip

在语法格式上,background-clip属性和background-origin 属性的取值相似,但含义不同,具体解释如下。

border-box:默认值,从边框区域向外裁剪背景。
padding-box:从内边距区域向外裁剪背景。
content-box:从内容区域向外裁剪背景。
10.设置多重背景图像

CSS3中,通过background-imagebackground-repeatbackground-positionbackground-size等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。

11.背景符合属性

CSS中的背景属性也是一个符合属性,可以将背景相关的样式都综合定义在一个复合属性background中

CSS基础样式盒子模型之二

 

相关文章:

  • 2021-10-10
  • 2021-05-26
  • 2021-04-08
  • 2021-07-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-29
猜你喜欢
  • 2021-05-21
  • 2021-09-12
  • 2021-05-18
  • 2021-06-21
  • 2021-12-22
  • 2021-12-20
  • 2022-12-23
相关资源
相似解决方案