如何在背景颜色下面有背景图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (32)

这个问题在这里已有答案:

我想知道是否有办法在背景颜色后面放置背景图像。

我有这个带滑块的颜色选择器,当我在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>

这会在实际图像上添加叠加层。

用户回答回答于

您可以使用::before背景颜色。

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(//img.pranavc.in/100)
}

div::after {
  position: absolute;
  content: '';
  background-color: rgba(100, 0, 1, .5);
  width: 100px;
  height: 100px;
}
<div></div>

或者更好的选择是将图像置于其中::before,然后减少它的z-index值,使得div可以访问。

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: rgba(100, 0, 1, .5);
}

div::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  background-image: url(//img.pranavc.in/100);
  z-index: -1;
}
<div></div>

扫码关注云+社区

领取腾讯云代金券