我怎样才能在背景颜色下面有背景图像呢？
我怎样才能在背景颜色下面有背景图像呢？
提问于 2019-03-15 03:49:43
我想知道是否有一种方法可以将背景图像放在背景颜色后面。
我有这个带滑块的颜色选择器，当我在alpha通道上迭代时，我想我可以在html中添加图像，然后将其放置在div下，但没有一个“更干净”的解决方案，而不必添加position: absolute;？如果可能的话，我真的很想避免这种情况。
我尝试使用::before和::after，但到目前为止都没有成功，图像无法显示。我试过用content: url("")，但它总是排在前面，似乎不能用z-index把它带到下面
let red = document.querySelector("#red");
let green = document.querySelector("#green");
let blue = document.querySelector("#blue");
let alpha = document.querySelector("#alpha");
let paletteColor = document.querySelector(".paletteColor")
paletteColor.style.backgroundColor = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`
red.addEventListener("input", rgbaValue);
green.addEventListener("input", rgbaValue);
blue.addEventListener("input", rgbaValue);
alpha.addEventListener("input", rgbaValue);
function rgbaValue() {
let rgba = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`
paletteColor.style.backgroundColor = rgba
}.palette {
border: 3px solid black;
}
.sliders {
list-style: none;
left: 80px;
display: inline-block;
}
.paletteColor {
height: 100px;
width: 100px;
display: inline-block;
}
.paletteColor::after {
height: 100px;
width: 100px;
display: inline-block;
background-color: black;
}
.paletteColor::before {
height: 100px;
width: 100px;
display: inline-block;
background-image: url("./checkered.jpg");
}<div class="palette">
<div class="paletteColor"></div>
<ul class="sliders">
<li><input id="red" type="range" min="0" max="255" value="150"></li>
<li><input id="green" type="range" min="0" max="255" value="222"></li>
<li><input id="blue" type="range" min="0" max="255" value="22"></li>
<li><input id="alpha" type="range" min="0" max="100" value="100"></li>
</ul>
<div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55170916
复制相关文章
相似问题