每个页面上的相同横幅，每个页面的不同 CSS 类答案

【问题标题】：Same banner on every page, different CSS class for each每个页面上的相同横幅，每个页面的不同 CSS 类
【发布时间】：2014-08-11 16:51:39
【问题描述】：

我遇到了一个小问题。我正在制作一个网站，在相同的页面上使用许多相同大小的横幅，每个横幅代表一个不同的行业。所以它只是替换图像和文本的问题。

我的横幅图片是“横幅 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 页面变得一团糟。

谢谢

【问题讨论】：

标签： html css responsive-design banner

【解决方案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");
}

【讨论】：

我这样做了，这是一个非常简单的解决方案。我很傻，没有早点考虑。干杯:)

【解决方案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>

【讨论】：