Question

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

我的横幅图片是＆＃34;横幅CSS＆＃34;上课，但我不知道如何使用不同的图像，而无需复制和粘贴我的＆＃34; Banner CSS＆＃34;每次上课。我更喜欢保持我的CSS清洁，并为所有横幅使用一个类。每当我尝试使用HTML导入照片时，它都不会出现，或者不会像我喜欢的那样发挥作用。（在最小高度响应和裁剪＆＃34;

这是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属性集的不同页面创建唯一类。

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

Answer 2

首先为resp-auto制作两个css：

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

每个页面上的相同横幅，每个页面都有不同的CSS类

2 个答案: