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

WBOY
Release: 2016-06-24 11:53:23
Original
1742 people have browsed it

如一个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>
Copy after login
Copy after login
Copy after login

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>
Copy after login
Copy after login
Copy after login


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


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


这里面讲的很好,但是没说图片右上角的原点的坐标(?),放到规定的位置(?)。
那个只能用高度来控制
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!