每一页上都在同一面旗帜，每一个不同的CSS类(Same banner on every page,

我有一个小问题。 我使用相同的页面大小相同的许多标语，每一个代表不同的行业做一个网站。 所以它只是更换图像和文字的问题。

我的横幅图片“标CSS”类的一部分，但我不知道如何使用不同的图像，而无需拷贝，每次粘贴我的“旗帜CSS”类。 我宁愿让我的CSS清洁，使用一个类所有的横幅。 每次我尝试使用HTML导入它要么不出现的照片，或不工作我想它的方式。 （响应并在最小高度裁剪”

---

这里的HTML

<div id=industries-strip> 
<div class="resp-auto">
</div>
</div>

下面是目前CSS

#industries-strip {
position: relative;
overflow: hidden;
width:100%;
height:100%;
padding-bottom: 27%;
min-height: 250px;
z-index: 6;


.resp-auto {
display: inline;
background-image: url("../img/strip-industries-automotive.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
height: 100%;
width: 100%;
float:bottom;
position:absolute;
}

目前，我旗收缩响应，直到一定的高度，然后开始在双方裁剪，这就是我的目标。 但是我想能够做到这一点上的其他网页，而不是让我的CSS网页长时间的混乱。

谢谢

Answer 1:

为什么不创建与所有常见的CSS旗帜类，然后对具有独特的不同页面不同类别的background-image属性设置。

如

.banner {
  display: inline;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
  height: 100%;
  width: 100%;
  float:bottom;
  position:absolute;
}

.automotive {
  background-image: url("../img/strip-industries-automotive.jpg");
}

.automotive-2 {
  background-image: url("../img/strip-industries-automotive-2.jpg");
}

Answer 2:

使两个CSS，首先为resp-auto ：

.resp-auto {
display: inline;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
height: 100%;
width: 100%;
float:bottom;
position:absolute;
}

和第二的industries

 .industrie1 {
 background-image: url("../img/strip-industries-automotive.jpg");
 }

并使用两班

<div class="resp-auto industrie1">
</div>

文章来源: Same banner on every page, different CSS class for each