html(精灵技术)--问题以及解决方案

目录

1.效果图：

2.问题效果图：问题图中的图片位置不动都是“专辑价格”

3.解决方案：(用Sass编写)

---

1.效果图：

2.问题效果图：问题图中的图片位置不动都是“专辑价格”

3.解决方案：(用Sass编写)

(1)html页面

（2）cssy页面

a.建一个minxi在里面编写混合器@mixin 给个给三个参数（$img,$x:0,$y:0）

background-image: url($img);图片 ,

background-position: $x $y;x y坐标,

background-repeat: no-repeat;设置背景图片不重复平铺。  

b.在.page外面用@import"minxi"引用

c.用@include jl-s("图片路径") 注意：路径要写对，然后&:nth-child(1)位置要写的对不要写在.nr-title里面，坐标可以自己慢慢调。