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

我想要的是不透明度不会影响文本。在之前，我听到过关于使用：的铃声，但我不知道锤子挂在哪里。我发现什么了吗？

有人知道如何使背景图像透明，而不必使用透明的PNG文件进行欺骗吗？

Answer 1

使用::before伪元素是正确的。以下是如何实现它：

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>