下面是一个简单的例子,展示如何使用CSS图片加上蒙层来创建一个网站:
.my-container {
width: 300px;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.my-layer {
position: relative;
width: 100%;
height: 100%;
.my-layer:before,
.my-layer:after {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
.my-layer:before {
left: 50%;
transform: translateX(-50%);
.my-layer:after {
right: 50%;
transform: translateX(-50%);
接下来,大家使用CSS的`background-repeat`属性将蒙层重复一次,并使用CSS的`background-color`属性将蒙层的背景颜色设置为白色。
通过使用CSS图片加上蒙层,大家可以创建美观的网站,并使内容更容易阅读。