Question

我在下面有这个HTML

<div class="heading-strip bg-3 container-fullscreen">
      <div class="overlay">
      </div>
</div>

我的bg-3已将css应用于此

.bg-3{background-image:url(../images/pictures/3.jpg);
 background-size:cover; }

现在我的主题中有7个不同尺寸的相同图像。我想用我的图像替换主题图像。因此，我在所有7个维度中设计了我的图像，并将其替换为希望按照不起作用的主题进行处理。

这里有相关的CSS

.bg-1{background-image:url(../images/pictures/1.jpg);   background-size:cover; }
.bg-2{background-image:url(../images/pictures/2.jpg);   background-size:cover; }
.bg-3{background-image:url(../images/pictures/3.jpg);   background-size:cover; }
.bg-4{background-image:url(../images/pictures/4.jpg);   background-size:cover; }
.bg-5{background-image:url(../images/pictures/5.jpg);   background-size:cover; }
.bg-6{background-image:url(../images/pictures/6.jpg);   background-size:cover; }
.bg-7{background-image:url(../images/pictures/7.jpg);   background-size:cover; }

.heading-strip{
padding-top:25px;
padding-bottom:25px;
}

.heading-strip .overlay{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 background: linear-gradient( to bottom,
  rgba(0, 0, 0, 0.4),
  rgba(0, 0, 0, 0.9)
 )   
}

原因是什么以及如何解决？

Here's我正在讨论的主题。社交图标下方的部分。

Answer 1

据我所知，你有多个图像，但只显示bg - 3图像。所以如果你想逐个显示其他图像，你需要使用这样的一些css标记：https：//codepen.io/dudleystorey/pen/ehKpi 或者你可以使用任何jquery插件对于这个http：//jquery.malsup.com/cycle /

图像无法正常显示

1 个答案: