Question

我绝对没有使用正确的标题，所以提前道歉。我根本就不知道怎么说出我的问题所以这里就是这样。

我在着陆页上使用了多个Call to Actions作为全宽可点击的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{

}

多个背景图像具有相同的等级

2 个答案: