如何让背景图像在背景颜色下方显示？

Question

我在想是否有办法在背景颜色后面放置背景图片。我有一个带滑块的调色板，当我迭代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>

- rodpadev

---

在我看来，绝对定位的背景棋盘图案是这里最简单的解决方案。 - j08691

问题是图像无法显示，因为背景颜色将是不透明的... - epascarello

这篇帖子可能会有所帮助 https://dev59.com/t2sy5IYBdhLWcg3w9i1u - Shihab

Answer 1

#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>

这会在实际图像上添加一个叠加层。最初的回答。

- Jennifer Goncalves

Answer 2

您可以使用::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>

- Pranav C Balan

Answer 3

好的，我发现如果我将位置设置为绝对位置并使用z-index进行调整，它可以工作，唯一的问题是我正在使用content而不是background-color。

.paletteColor{
    height: 100px;
    width: 100px;
    display: inline-block;
    z-index: 0;
}

.paletteColor::before{
    height: 100px;
    width: 100px;
    display: inline-block;
    position: absolute;
    z-index: -1;
    content: url("./checkered.png");
}

- rodpadev