background 复合属性
background-color 背景颜色(纯)
.main{
width:300px;
height:300px;
background-color: blue;
}
background-image 背景图片 或者 渐变颜色
background-image:linear-gradient(角度(deg),颜色1,颜色2, …); 线性渐变(渐变方向,颜色1->颜色2->…)
在背景颜色之上
.main{
width:300px;
height:300px;
background-color: blue;
/* */
background-image: url(img/R-C.jfif);
}
background-repeat 背景是否重复
横向repeat-x, 纵向repeat-y;
默认repeat,可设为不重复no-repeat
background-repeat:round; 个体完整,微调大小
background-repeat:space; 调整空隙
.main{
width:300px;
height:300px;
background-color: rgb(160, 236, 255);
background-image: url(img/R-C.jfif);
/* */
background-size:30%;
background-repeat: space;
}
background-size 设置图片大小
background-size:宽度,高度;
单位可以是像素和百分数。
例如上一个例子中,图片太大了,我们将图片设置为30%。
background-size:30%;
cover 预定义值(覆盖)根据大小自动变化
background-position 设置背景图片显示位置
background-position: 横向偏移量,纵向偏移量;
backgound-position-y; y轴
backgound-position-x; x轴
默认显示左上角0,0;文章来源:https://www.toymoban.com/news/detail-640037.html
background-attachment 设置背景图片是否随页面滚动
background-attachment:scroll; 滚动(默认)
background-attachment:fixed; 固定
下面是固定模型的效果:
文章来源地址https://www.toymoban.com/news/detail-640037.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
body{
width:100%;
}
.zw{
height: 500px;
}
.box{
width:100%;
background-image: url(1.jpg);
background-attachment:fixed;
height: 300px;
}
</style>
</head>
<body>
<div class="zw">
占位置
</div>
<div class="zw">
占位置
</div>
<div class="box">
</div>
<div class="zw">
占位置
</div>
<div class="zw">
占位置
</div>
</body>
</html>
到了这里,关于CSS:background 复合属性详解(用法 + 例子 + 效果)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!