Question

我有一个包含5个页面的网站模板。在页面顶部，有一张照片，该照片由ID标签#subheader控制。它具有用于文本的后续CSS，等等。

    #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: 500;
  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 2px black;
}
}
#subheader .subdetail li a {
  color: #ff6600;
}
#subheader .subdetail li.sep {
  margin-right: 20px;
}

问题是，我希望所有页面都具有不同的图像。如何调整CSS，以便拥有所有相同的属性，但URL不同？

Answer 1

由于该URL将取决于页面，因此将CSS的特定部分放在实际页面上而不是在常规CSS文件上是有意义的。

您可以使用style属性在页面的HTML上添加background-image标签。我不知道您是否正在使用某个框架或其他任何东西，只是采纳这个想法即可。

在第1页上：

<body>
  <style>
    #subheader {
      background-image: url('image_1.jpg');
    }
  </style>
  something something...
</body>

在第2页上：

<body>
  <style>
    #subheader {
      background-image: url('image_2.jpg');
    }
  </style>
  something something...
</body>

如果您想要一些后备值，则可以在CSS文件上使用默认图像。

Answer 2

纯CSS唯一可以做的就是为要在其上放置不同图像的每个页面创建一个子类。

方法如下：

#subheader.first
{
    background: --url here;
}

#subheader.second
{
    background: --url here;
}

然后将其应用到不同的页面上

<div id="subheader" class"first">

示例：https://jsfiddle.net/bw5xdfrg/

如何获得带有不同图像URL的页面？

2 个答案: