1

我有一个看似简单的 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 包含一个具有 :hover 不透明度集的 img 。这样我可以看到背景颜色有效，而不是背景图像

4

3 回答 3

0

删除 img （如果它不透明）

对于冲突：

  • 将 !important 放在 css 指令的末尾。
  • 或尝试内联样式。
于 2012-07-31T14:25:37.687 回答
0

您是否正在尝试制作此效果？http://jsfiddle.net/r48ST/1/

[编辑]：这就是http://jsfiddle.net/r48ST/2/的效果，只是在图像上添加了一些不透明度。此外，在不透明度上添加一些过渡效果，您将获得完整效果。

于 2012-07-31T14:28:03.880 回答
0

如果不为您的标签指定尺寸<a>，它将符合<img>它所包含的标签的尺寸。因此，您应用的任何背景图像都将被<img>. 设置重复只会重复背景图像的次数，只要它适合（裁剪或整个）元素。如果你给元素的宽度和高度大于它所包裹的图像的宽度和高度，你应该会看到背景。

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

 

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

于 2012-07-31T14:31:42.640 回答