首页 >web前端 >css教程 > 正文

css如何从png里截取小图标

原创2021-05-18 17:24:420715

css从png里截取小图标的方法:首先使用background属性引入png图片,使用no-repeat属性值设置图片不重复;然后使用background-position属性设置图像初始位置,进行精确定位。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css文件

.icon
{
    background: url(icon.png) no-repeat; /*url为png图片的路径*/
    /*width和line-height分别对应每个小图标的宽和高*/
    width: 20px;    
    line-height: :20px;
    display: inline-block;
}
.icon-small
{   /*png图片左上角为原点,往右往下均为负值*/
    background-position: -150px 0px;/*对应小图标的坐标*/
}

html文件

<!-- 联想一下Bootstrap 字体图标(Glyphicons) 
    <span class="glyphicon glyphicon-search"></span>
-->
<div class="icon icon-small"></div>

为什么一个页面的或者多个页面的背景图片,都集成到一张图片里?

我们访问网站的时候,会对服务器发出HTTP请求,网站打开的快慢,处理与页面的大小图片大小网速等多方面的因素外,还有个重要的因素就是HTTP 的请求数。HTTP的请求数越多,网站打开的速度当然就会越慢,对服务器发出一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,一个连接,一个图片都会对发出一个请求,如果HTTP请求过多,就会造成页面大量的延时,访问速度自然就慢了。

如果把所有的背景图,都集成到一个图片里,这样就只会对服务器发出一个HTTP请求,请求数就会大量减少,延时就小了。然后采用CSS 的 background-image 和 background-position 属性来实现所需的背景图并定位,达到页面所需要的表达效果。

推荐学习:css视频教程

以上就是css如何从png里截取小图标的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:CSS png
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    醉折花枝作酒筹

    飞花飘絮,霓裳翩翩舞,几多情愫心飞扬。

    最近文章
    PHP中mysqli的基本操作有哪些971
    等了那么久的PHP代码拯救者Deliverer,来咯!407
    PHP调用其他文件中函数的方法是什么555
    推荐视频教程
  • CSS 4.2.4参考手册CSS 4.2.4参考手册
  • CSS视频教程-玉女心经版CSS视频教程-玉女心经版
  • 玩转CSS Flexbox弹性盒子布局(2021新课)玩转CSS Flexbox弹性盒子布局(2021新课)
  • Web开发基础_HTML+CSSWeb开发基础_HTML+CSS
  • 新独孤九贱之:HTML5极速入坑新独孤九贱之:HTML5极速入坑
  • 视频教程分类