Question

我有一个我正在努力建立的网站。主页面有一个英雄形象，在第二页面我想显示一个不同的英雄形象。

index.html：

<!--Hero Section-->
<header id="about">
    <div class="header-content">
        <div class="header-content-inner">
            <h1 id="homeHeading">Hone is home</h1>
            <hr>
            <p>this text is ontop of the hero image</p>
            <a href="#deal" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
        </div>
    </div>
</header>

CSS：

header {
    min-height: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center;
    background-image: url(../img/header.jpg);
    color: #fff;
}

对于membership.html（我希望更改英雄形象的页面）：

<!--Hero Section-->
<header id="member">
    <div class="header-content">
        <div class="header-content-inner">
            <h1 id="homeHeading">Hone is home</h1>
            <hr>
            <p>This text is on top of the hero image</p>
            <a href="#deal" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
        </div>
    </div>
</header>
<!-- / Hero section-->

我尝试使用id='member'：

覆盖英雄形象

header #member {
    background-image: url(../img/header2.jpg) !important;
}

但这不起作用。所以我想也许我可以尝试一些JavaScript：

window.onload = function(){
    #member {
        background-image: url('./img/header2.jpg');
    }
}

和

$(function() {
     $("header").attr("src", "../img/header2.jpg")
})

但都没有奏效。请注意，这不是一个正在上线的网站，它是为了练习，如果可以的话，我会尝试解决问题。

Answer 1

您可以使用两个类，一个是标题标记共有的类，另一个是标题id特有的类。此外，!important不需要id具有更高的特异性。

请注意，CSS中的tag和id之间没有空格，也就是说，它应该是header#id。

HTML：

<!--Hero Section-->
<header id="about" class="commonHeader">
    // rest of code
</header>

<!--Hero Section-->
<header id="member" class="commonHeader">
    // rest of the code
</header>

CSS：

.commonHeader {
    min-height: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center;
    color: #fff;
}

header#member {
    background-image: url(../img/header2.jpg);
}

header#about{
    background-image: url(someOtherImage);
}

Answer 2

您使用的是错误的CSS选择器。你应该使用这样的东西：

header#member {
     background-image: url(../img/header2.jpg);
}

header和#member之间不应该有空格。您当前的选择器表示#member标记，它是header标记的后代。并且不需要!important。

Answer 3

您的代码

 header #member {
  background-image: url(../img/header2.jpg) !important;
 }

你需要使用

header#member{
  background-image: url(../img/header2.jpg);
}

JS

您的代码

window.onload = function(){
    #member {
        background-image: url('./img/header2.jpg');
    }
}

这不工作

使用jQuery

您的代码

$(function() {
     $("header").attr("src", "../img/header2.jpg");
});

你需要使用

$("header#member").css("background-image","path to image");

如何根据html页面更改英雄形象？

3 个答案: