html - 如何在以前的背景图像之上添加背景图像?
问题描述
我有一个正在编写的 css 页面,我需要在一个类中应用背景图像,然后使用不同的类将部分透明的背景图像放在已经存在的背景图像之上。这有点像沙拉,所以让我做一个演示。
html{
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
}
css {
.background1 {
background-image:url(...);
}
.background2 {
background-image:url(...);
}
.backgroundFilter {
background-image:url(...);
}
}
在这个例子中,第一个 div 应该有背景图像 1,第二个应该有背景图像 1,但过滤器图像放在它上面,然后第三个应该是图像 2,第四个应该是图像 2,上面有相同的过滤器.
然而,在这个例子中 .backgroundFilter 将覆盖前一个图像而不是覆盖它。
这是可能的还是我需要为每个版本的背景图像创建一个不同的类?
解决方案
您可以考虑 CSS 变量。指定 2 个您可以稍后更改的背景图层。您可以轻松扩展到任意数量的背景:
.container > div {
background:
/*we make the default value a transparent image*/
var(--im1,linear-gradient(transparent,transparent)),
var(--im2,linear-gradient(transparent,transparent));
height:200px;
width:200px;
display:inline-block;
}
.background1 {
--im2: url(https://picsum.photos/200/300?image=0);
}
.background2 {
--im2: url(https://picsum.photos/200/300?image=1069);
}
.backgroundFilter {
--im1: linear-gradient(to right,transparent,green);;
}
<div class="container">
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
</div>
您也可以考虑为新背景添加一个伪元素,但您只能使用 3 个背景,因为我们只有 2 个伪元素:
.container > div {
height:200px;
width:200px;
display:inline-block;
position:relative;
z-index:0;
}
.background1 {
background: url(https://picsum.photos/200/300?image=0);
}
.background2 {
background: url(https://picsum.photos/200/300?image=1069);
}
.backgroundFilter::before {
content:'';
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(to right,transparent,green);;
}
<div class="container">
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
</div>
推荐阅读
- php - 在mysql数据库中插入数据的问题
- scala - Spark ML API 将向量转换为概率以进行多标签分类
- c++ - C++:有效地将 Sha256 摘要转换为 OpenSSL Bignum?
- php - 在 Symfony EntityType 字段中,如何更改呈现的 OPTGROUP 文本?
- java - 为什么我在迭代时得到一个 CurrentModificationException 而没有删除?- Java
- python - Python Django 测试两个异常之一
- python - 在 Ansible 词典中查找重复项
- ios - UIImagePickerController() 确实在 UIImage 视图中显示图像很好,但在集合和表的 UIImage 视图中旋转?
- c++ - 如何通过查找迭代器结果分配给对集合的元素
- java - 无法在 Visual Studio Code 中使用 Maven 包含 LWJGL