CSS Sprite 问题

Question

我在这里与一些 CSS 作斗争，它们不想被强制提交。我只想要那里的 Sprite ，周围没有边框，并且在悬停时降低不透明度。

到目前为止，这是跨浏览器的外观:

Chrome 版本最接近我想要的，但我无法让边框消失，悬停不透明度也没有任何作用。

代码方面，这是我目前所处的位置:

.social-icons {
  background: url('/wp-content/themes/MySite/images/social-profiles/social-profiles-s.png') top left no-repeat;
  width: 32px;
  height: 32px;
}

.social-icons img {
  border-style: none;
}

.social-icons img:hover {
  opacity: 0.8;
}

img#facebook-ico.social-icons {
  background-position: 0px 0px;
}

img#twitter-ico.social-icons {
  background-position: -34px 0px;
}

img#google-plus-ico.social-icons {
  background-position: -68px 0px;
}

img#rss-ico.social-icons {
  background-position: -136px 0px;
}

Answer 1

我不知道为什么，但是你有空图像元素(没有'src')的事实不知何故导致了边框。我会删除图像元素并将背景直接放在 anchor 标记上。然后根据需要 float 和调整边距:

<a href="https://www.facebook.com/MeanwhileInAmerica" title="Meanwhile, In America on Facebook" target="_blank"></a>

.widget-container a:hover {
    background: url('/wp-content/themes/MeanwhileInAmerica/images/social-profiles/social-profiles-s.png') top left no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    float: left;
}

.widget-container a {
    opacity(0.8);
}

我使用 Dev Tools 对其进行了测试...边框消失了，不透明度更改也起作用了。

您可能需要以不同的方式定位您的元素，以避免更改页面的其他部分。 Sprite 在其他方面看起来还不错。

编辑 根据:http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src “必须存在 src 属性”。