怎么获取对应的图片

源自：实战：挂号平台首页 5-11 编程练习

收起

3回答

好帮手慕言回答被采纳获得+3积分 2020-02-20 10:23:52

同学你好，是的，需要设置为背景图片。

如果还有其他疑问，建议在问答区重新提问，便于后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

好帮手慕言 2020-02-19 18:18:35

同学你好，通过background-position这个属性去实现。如下示例：老师从网上随便找了一张雪碧图，想要使用第二个图片：

它的background-position 属性值，是根据是第二个图在雪碧图的位置

这里我们只需要挪动水平方向，需要向左移动，所以需要设置负值。垂直方向不需要挪动（-165是简单测量得出，可能不准确，可以简单调试）

效果：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

提问者早知今日何必当初 #1

老师是不是用上面这种方法需要把图片设置为背景图片才可以使用

2020-02-20 09:30:10
提问者早知今日何必当初 #2

width: 40px; height: 1000px; background-image: url("http://img1.sycdn.imooc.com//climg/58c61b610001c58300440638.jpg") ; background-repeat: no-repeat; background-size: 200% 100%; float: left; 我用这种方法完成有没有问题

2020-02-20 09:31:54

好帮手慕言 2020-02-19 10:06:22

同学你好，建议：图标可以使用i标签。以老师的html结构为例：可以修改如下：

同学可以按照自己的html结构进行调整，如果不能实现效果，可以把全部的代码粘贴上来，老师根据同学的代码给出建议。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

提问者早知今日何必当初 #1

老师能告知下方法吗，不会切图片忘记了，一个雪碧图很多图片怎么选取

2020-02-19 17:17:13
提问者早知今日何必当初 #2

width: 20px; height: 1000px; background-image: url("http://img1.sycdn.imooc.com//climg/58c61b610001c58300440638.jpg"); } 我用了这种方法，老师发的没看懂

2020-02-19 17:44:20
提问者早知今日何必当初 #3

.frame-left { width: 40px; height: 1000px; background-image: url("http://img1.sycdn.imooc.com//climg/58c61b610001c58300440638.jpg") ; background-repeat: no-repeat; background-size: 200% 100% }

2020-02-19 18:13:57