html - 我怎样才能在背景颜色下面有背景图像?
问题描述
我想知道是否有办法在背景颜色后面放置背景图像。
我有这个带滑块的颜色选择器,当我在 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>
解决方案
#img-wrapper {
background: red;
}
img {
width: 100%;
opacity: 0.5;
vertical-align: middle;
}
<div id="img-wrapper"><img src="https://images.freeimages.com/images/large-previews/25d/eagle-1523807.jpg" alt=""></div>
这会在实际图像上添加叠加层。
推荐阅读
- javascript - 如何使 SVG 文本可编辑?
- javascript - 让第二个 JS 函数触发
- android - 将 it.buildConfigField 用于字符串资源风格
- ios - Xamarin iOS 版本的构建失败
- curl - 在浏览器中找到页面时 cURL 返回 404
- swift - 将图像添加到 UICollection 标头 Swift
- c++ - 尝试在 SFML 中加载纹理时出现 Visual Studio 错误/异常:访问冲突读取位置 0x00200000
- bash - 管道后如何在子shell内使用while循环
- python - 如何删除 IPython 控制台中的剩余命令?
- sql - 如何确保 Number 列的值大于 1?