css - 使用 CSS 控制 DOM 中的 Sprite 大小。

Question

Sprite :

我执行了以下操作，它看起来很棒但是...我不想显示 400 像素的宽度，我希望它包含在另一个 250 像素的 img 中。有没有办法(我尝试了很多方法)用 CSS 控制 Sprite 大小，或者我是否需要 js 解决方法？

.portfolio a .icon1  {
    width: 400px;
    height: 250px;
    background: url('../images/gate-sprite.png') 0 0;
    background-repeat: no-repeat;
}

.portfolio a:hover .icon1 {
    width: 400px;
    height: 250px;
    background: url('../images/gate-sprite.png') 0 -250px;
    background-repeat: no-repeat;
}

Answer 1

使用::before 或::after 伪元素来包含您的图标。这样您就可以设置图标大小，并为::before 或::after 元素指定背景图像。

例子:

.portfolio a .icon1::before  {
    content: "";
    display: inline-block;
    width: 400px;
    height: 250px;
    background: url('../images/gate-sprite.png') 0 0;
    background-repeat: no-repeat;
} 

更多关于 :before 和 :after 的信息: http://www.w3schools.com/css/css_pseudo_elements.asp