代码之家 › 专栏 › 技术社区 › Omar Marei

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

banner responsive-design css html

Omar Marei · 技术社区 · 11 年前

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

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

谢谢

2 回复 | 直到 11 年前

Guy Anoop Joshi P 11 年前

为什么不创建一个包含所有常见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");
}

Fappie. 11 年前

制作两个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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前