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.

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"

Here's the HTML

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

Here's the current 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;
}

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

回答1:

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.

E.g.

.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:

make two css, first for 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;
}

and second for industries

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

and use a two classes

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

来源：https://stackoverflow.com/questions/25248417/same-banner-on-every-page-different-css-class-for-each

标签

html

css

responsive-design

banner