具有相同 class 的多个背景图片

Question

我绝对没有使用正确的标题，所以提前道歉。我根本不知道如何表达我的问题，所以就这样吧。

我在着陆页上使用多个号召性用语作为全宽可点击 div。我想为每个使用不同的背景图像，但我无法让它工作。我过去用不同的背景颜色做过，但相同的代码似乎对我不起作用。以下是我到目前为止所拥有的。谢谢！

#paralax_cta { width: 100%; margin:0; text-align: center; padding: 50px 0 50px 0; position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}
#paralax_cta:hover { opacity:0.9; }
#paralax_cta a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ }

#paralax_cta .bg1 a { background-image: url(../images/cta-backgrounds/office-blurred-red.jpg); background-repeat:no-repeat; background-position:center center; }

#paralax_cta .bg2 a { background-image: url(../images/cta-backgrounds/office-blurred-blue.jpg); background-repeat:no-repeat; background-position:center center; }

<div id="paralax_cta class="bg1"">
 <h2>CALL TO ACTION</h2>
 <a href="#" title="Call to Action"></a>
</div>

<div id="paralax_cta class="bg2"">
 <h2>CALL TO ACTION</h2>
  <a href="#" title="Call to Action"></a>
</div>

Answer 1

您 CSS 选择的背景图像不正确。应该是

HTML

<div id="paralax_cta" class="bg1">
 <h2>CALL TO ACTION</h2>
 <a href="#" title="Call to Action"></a>
</div>

<div id="paralax_cta" class="bg2">
 <h2>CALL TO ACTION</h2>
 <a href="#" title="Call to Action"></a>
</div>

CSS

#paralax_cta.bg1 h2 {
  background-image: url('http://placehold.it/200x100');
}

#paralax_cta.bg2 h2 {
  background-image: url('http://placehold.it/200x100');
}

JSFiddle

Answer 2

您不应该有两个具有相同 ID 的 div。变化

    <div id="paralax_cta class="bg1"">
     <h2>CALL TO ACTION</h2>
        <a href="#" title="Call to Action"></a>
    </div>

    <div id="paralax_cta class="bg2"">
     <h2>CALL

 TO ACTION</h2>
     <a href="#" title="Call to Action"></a>
</div>

至

<div id="paralax_cta" class="bg1"">
 <h2>CALL TO ACTION</h2>
    <a href="#" title="Call to Action"></a>
</div>

<div id="paralax_cta2" class="bg2"">
 <h2>CALL TO ACTION</h2>
     <a href="#" title="Call to Action"></a>
</div>

并按照 Manoj Kumar

指出的那样修复您的 css 选择器

#paralax_cta.bg1 h2{

}

#paralax_cta2.bg2 h2{

}

具有相同 class 的多个背景图片

Mulitple Background Images with the same class

html

css

background-image