Question

我正在处理一个包含不同背景的响应式网站我使用<div>标记放置一个背景，现在如果我想要另一个背景，那么如何使用<div>，因为每当我尝试放置另一个背景然后它没有显示时，它只显示我的第一个背景。

HTML：

<div id="home" > <div id="slideshow" >
  <img src="img/01.png" style="width: 150px; height: 150px; display: none;"> 
  <img src="img/swan.jpg" style="width: 150px; height: 150px; display:none; "> 
</div></div>

CSS：

#home {
  background-image:url("../img/sofa.jpg");
  background-size:100% auto; background-repeat:no-repeat;height:100%; position:absolute; width:100%; top:0; left:0;
}

并且在#slideshow我使用了jQuery inline。

现在假设我给<div style="background-image:url("img/s1.jpg");">...</div> 那么它只需要sofa.jpg作为背景的全高和宽度。没有将s1.jpg显示为另一个背景。

Answer 1

你的第二个div只是隐藏在第一个div下面，因为你正在修复第一个具有顶部和左侧属性的div ..为你的第二个div显示你必须使用相同的css样式。现在你只是分配一个背景图像。您已经在CSS中添加了其他样式

.s1{
  background-image:url("../img/s1.jpg");
  background-size:100% auto; 
  background-repeat:no-repeat;
  height:100%;   
  position:absolute; 
  width:100%; 
  top:0; 
  left:0;
}

将此课程添加到您的div

<div class='s1'></div>

是否可以使用不同的<div>标签提供不同的背景图像？

1 个答案: