Heim > Web-Frontend > HTML-Tutorial > css的background-url属性是怎么计算图片中各个小图的位置的?_html/css_WEB-ITnose

css的background-url属性是怎么计算图片中各个小图的位置的?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:53:23
Original
1797 Leute haben es durchsucht

如一个png中里面有三个不同颜色的小星星,怎么能准确写出每个小星星的像素位置?
如图


回复讨论(解决方案)

background-position

 <div style="background: url(http://img.bbs.csdn.net/upload/201411/20/1416475573_323694.png) no-repeat 0px -30px;width:100px;height:34px"></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

http://64.233.171.161/
搜索 css 图片 位置
得:

http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html

http://www.w3school.com.cn/cssref/pr_background-position.asp

http://www.wibibi.com/info.php?tid=79

有 合图工具,可以生成css。

 <div style="background: url(http://img.bbs.csdn.net/upload/201411/20/1416475573_323694.png) no-repeat 0px -30px;width:100px;height:34px"></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


这里面讲的很好,但是没说图片右上角的原点的坐标(?),放到规定的位置(?)。


 <div style="background: url(http://img.bbs.csdn.net/upload/201411/20/1416475573_323694.png) no-repeat 0px -30px;width:100px;height:34px"></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


这里面讲的很好,但是没说图片右上角的原点的坐标(?),放到规定的位置(?)。
那个只能用高度来控制
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage