<div> 背景图片透明但不是文字

Question

我正在尝试创建一个具有缓慢平移透明背景的 <div>，作为 opencart 中 HTML 模块的一部分。它是一个模块，样式必须是独立的。

我目前拥有的：

<style>
@keyframes backgroundScroll {
0% { background-position: 50% 50%; }
33% { background-position: 1% 50%; }
40% { background-position: 1% 50%; }
66% { background-position: 99% 50%; }
75% { background-position: 99% 50%; }
100% { background-position: 50% 50%; }}
/* added pauses to each edge of the image */

#mtn-scroll {
width: 800px;
height: 100%;
background: url(coolpanoramapicture.jpg) no-repeat; opacity:0.1;
background-size: 250%;
background-position: 50% 50%;
animation: backgroundScroll 60s ease-in-out 1s infinite; }
</style>

<div id="mtn-scroll">
  <div>
  Content text goes here!
  </div>
</div>

我想要的是不透明度也不会影响文本。我听说过关于使用 ::before 的铃声，但我不知道锤子挂在哪里。我有什么发现吗？

有谁知道如何只使背景图像透明，而不必借助透明的 PNG 文件进行欺骗？

Answer 1

您在 ::before pseudo-element 方面走在了正确的轨道上。以下是实现方法：

html,
body {
  height: 100%;
}

#mtn-scroll {
  width: 800px;
  height: 100%;
  position: relative;
}

#mtn-scroll::before {
  background: url('https://i.imgur.com/4HLnakJ.jpg') no-repeat;
  opacity: 0.1;
  background-size: 250%;
  background-position: 50% 50%;
  animation: backgroundScroll 60s ease-in-out 1s infinite;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  content: '';
}

#mtn-scroll div {
  position: relative;
}

@keyframes backgroundScroll {
  0% {
    background-position: 50% 50%;
  }
  33% {
    background-position: 1% 50%;
  }
  40% {
    background-position: 1% 50%;
  }
  66% {
    background-position: 99% 50%;
  }
  75% {
    background-position: 99% 50%;
  }
  100% {
    background-position: 50% 50%;
  }
}

<div id="mtn-scroll">
  <div>
    Content text goes here!
  </div>
</div>

<div> 背景图片透明但不是文字

<div> Background image transparent but NOT text

html

css

transparency