<分区>
标签 html css transparency
<分区>
我正在尝试创建一个 <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 文件进行欺骗？
最佳答案
您使用 ::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>关于html - <div> 背景图片透明但不是文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49564612/