我想弄清楚如何在 Compass sprite 中实现这样的背景裁剪: http://nicolasgallagher.com/css-background-image-hacks/
http://jsfiddle.net/blineberry/BhbrL/
这是我在 .sass 文件中的内容:
@import "buttons/*.png"
@include all-buttons-sprites
.buttons-arrow
background-image: none
width: 30px
height: 45px
.buttons-arrow:before
+buttons-sprites(arrow)
display: block
content: ""
width: 15px
height: 27px
如您所见,我尝试先制作没有背景图像的 .buttons-arrow,然后再添加回背景图像。但是,它给了我这个 .css 文件:
.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat;
}
.buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow {
background-image: none;
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
display: block;
content: "";
width: 15px;
height: 27px;
}
.buttons-arrow:before .buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow:hover {
background-color: #ea4800;
}
显然这是错误的,因为它组合成这个 .buttons-arrow:before .buttons-arrow
我只想要这样一个简单的结果
.buttons-arrow {
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
background-image: url('../images/buttons-s5ae2b3a1e9.png');
display: block;
content: "";
height: 27px;
width: 15px;
如何使用 sprite 在 Compass 中对此进行编码?
最佳答案
因为这个地方几乎已经死了,我会帮从谷歌搜索这个的人一个忙。答案是:
放在上面:
$buttons: sprite-map("buttons/*.png")
我有 arrow.png 和 arrow_hover.png 在那里。这个想法是使用 sprite-map 函数而不是 @import
all。然后确保为 :before
伪元素包含背景图片,但不包含原始内容:
.buttons-arrow
width: 50px
height: 50px
&::before
content: ""
background: sprite($buttons, arrow) no-repeat
display: block
position: relative
width: 20px
height: 20px
&:hover
background-color: gray
&::before
content: ""
background: sprite($buttons, arrow_hover) no-repeat
position: relative
width: 20px
height: 20px
关于css - 带有 compass Sprite 的伪背景裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12743122/