Question

我有一个看似简单的html结构：

<div class="featured-image img-wrapper full-width">
  <a href="http://localhost/wordpress/?p=26">
    <img ... />
  </a>
</div>

现在我想要定位a（遗憾的是它没有自己的类），所以我使用这个CSS

.img-wrapper a {
  background-image:url(../images/bkgs/stripes_tiny_08.png);
  background-repeat:repeat;
}

但这个元素没有任何反应！它肯定不是背景图像本身，也尝试了简单的颜色。奇怪的是：在页面上还有另一个类似的构造，选择器在那里工作！ Firebug显示以下CSS路径（目标a在末尾）

working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a

我没有想法。没有找到任何重写的CSS声明。知道如何定位那个？

编辑：目标a包含一个img，其中包含：hover opacity set。这样我可以看到背景颜色，但不是背景图像

Answer 1

删除img（如果它不透明）

冲突：

把重要信息放在css指令的最后。
或尝试内联样式。

Answer 2

你想尝试这种效果吗？ http://jsfiddle.net/r48ST/1/

[编辑]：这就是效果http://jsfiddle.net/r48ST/2/，只是在图像上添加了一些不透明度。另外，对不透明度进行一些过渡效果，你就会有完全的效果。

Answer 3

如果不指定<a>代码的尺寸，它将符合其中包含的<img>代码的尺寸。因此，您应用的任何背景图片都将由<img>覆盖。重复使用只重复背景图像多次，它将适合（裁剪或整体）元素。如果你给元素的宽度和高度大于它包装的图像的宽度和高度，你应该看到背景。

我希望这是你所面临的问题。否则，如果您可以发布更多代码或演示，我们将能够更好地为您提供帮助。

编辑：我刚刚注意到您对以下内容的编辑：悬停不透明度。我建议您将样式更改为更像：a > img:hover { visibility: hidden; }

简单的xxx yyy {} CSS选择器不工作 - 为什么？

3 个答案: