CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。
在本章,您将学到以下背景属性:
- background-size
- background-origin
您也将学到如何使用多重背景图片。
新的背景属性:
属性 | 描述 | CSS |
---|---|---|
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
- CSS3 background-size 属性
- CSS3 background-origin 属性
- CSS3 多重背景图片
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
background-size
background-size 属性规定背景图像的尺寸。
默认值: | auto |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundSize=”60px 80px” |
语法
background-size: length|percentage|cover|contain;
值 | 描述 | 测试 |
---|---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 | 测试 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 | 测试 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 | 测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
.wp-bp-full-page-header { background-color: #343a40; color: #fff; background-size: cover; background-position: center; }
background-position
background-position:
CSS 颜色
CSS 颜色值
颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合。
在CSS中定义颜色的方法有:十六进制色、RGB颜色、RGBA颜色、HSL颜色、HSLA颜色、预定义/跨浏览器颜色名。
https://www.html.cn/book/css/values/color/index.htm
RGBA
说明:
RGBA(R,G,B,A)
取值:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度,取值0~1之间。
说明:
RGBA记法
此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式实现透明度,可使用 IE 滤镜处理
示例代码:
<section class="wp-bp-full-page-header" >
<div class="page-header-overlay" >
<section class="wp-bp-full-page-header" style="background-image: url( http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_mountains_大-1.jpg )" >
<div class="page-header-overlay" style="background-color: rgba(0, 0, 0, 0.5);" >
rgba色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度