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伪元素走在正确的轨道上。以下是如何实现它：

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>背景图片透明但不是文字

1 个答案: