每个页面上都有相同的横幅，每个CSS都有不同的CSS类 [英] Same banner on every page, different CSS class for each

问题描述

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

I'm having a small issue. I am making a site using many banners of same size on identical pages, each one representing a different industry. So its just a matter of replacing images and text.

我的横幅图像是横幅CSS类的一部分，但我不知道如何使用不同的图像，而无需每隔一段时间复制和粘贴横幅CSS类时间。我宁愿保持我的CSS清洁，并为所有横幅使用一个类。每次尝试使用HTML导入照片时，它都不会显示，或者不会按照我喜欢的方式运行。 （响应和在最小高度裁剪

My banner images are part of a "Banner CSS" class, but I don't know how to use different images without copying and pasting my "Banner CSS" class every time. I'd prefer to keep my CSS clean and use one class for all the banners. Every time I try and use HTML to import the photo it either doesn't appear, or doesn't function the way I'd like it to. (Responsive and Cropping at a min-height"

以下是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页面乱成一团。

Currently my banner shrinks responsively, until a certain height, then begins to crop at the sides, and this is my goal. But I'd like to be able to do this on other pages and not make my CSS page a long mess.

谢谢

Thanks

推荐答案

然后为具有独特 background-image 属性集的不同页面设置独特的类。

Why not create a banner class with all the common css in, and then have unique classes for the different pages that have the unique background-image property set.

例如

.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");
}

这篇关于每个页面上都有相同的横幅，每个CSS都有不同的CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！