我有一个包含多个页面、关于页面、联系页面等的网站模板。
每个页面顶部的图片容器都有一个id标签#subheader。所以它分布在所有页面中。我想为每个页面更改照片,所以我复制并粘贴了 #id 标签的 css,并为每个页面稍微更改了标签。我希望只更改每个网址的网址,并更改标签名称,这样我就可以相应地更改 html。
问题是,后续的 Id 标签总是搞砸图像。它使整个结构乱七八糟。但是当我将 url 分配给原始类时,照片效果很好。
我在这里错过了什么?
#subheader {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Services.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
#subheader2 {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
#subheader3 {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
#subheader2
:
原始#subheader
:
这是#subheader 标签的完整 CSS。
/* subheader */
#subheader {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Services.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
#subheader h1 {
color: #eceff3;
text-align: center;
margin-top: 40px;
font-size: 32px;
font-weight: 00;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 2px 2px 2px black;
}
#subheader span {
letter-spacing: 2px;
display: inline-block;
font-size: 15px;
margin-top: 88px;
color: #fff;
}
#subheader .subdetail {
font-size: 11px;
letter-spacing: 2px;
text-align: center;
margin-top: 10px;
text-transform: uppercase;
color: #777;
padding-left:0px !important;
}
#subheader .subdetail li {
display: inline-block;
color: #fff;
margin:0;
text-shadow: 2px 2px 6px black;
font-weight: 700;
}
#subheader .subdetail li a {
color: #ff6600;
}
#subheader .subdetail li.sep {
margin-right: 20px;
}
/* subheader end */
最佳答案
这个:
#subheader {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Services.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
#subheader2 {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
#subheader3 {
padding-bottom: 70px;
background: #222;
background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg)top fixed;
background-size: cover;
background-repeat: no-repeat;
}
可以简化为:
.subheader {
padding-bottom: 70px;
background-color: #222;
background-position: top left;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.subheader.services {
background-image: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Services.jpg);
}
/* H1s specific to services */
.subheader.services h1 {
…
}
.subheader.architect {
background-image: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg);
}
/* H1s specific to architect */
.subheader.architect h1 {
…
}
HTML
<div class="subheader services">
<h1>…</h1>
</div>
<div class="subheader architect">
<h1>…</h1>
</div>
关于html - 如何让这些 id 标签的样式正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54757543/