Demo7：背景截取图标显示

最新推荐文章于 2023-12-08 21:32:22 发布

ljl_web

最新推荐文章于 2023-12-08 21:32:22 发布

阅读量283

点赞数 1

分类专栏： HTML入门 Demo 文章标签：图标

本文链接：https://blog.csdn.net/ljl_web/article/details/50756022

版权

HTML入门同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Demo

13 篇文章 0 订阅

订阅专栏

背景截取图片显示的实现

实现效果

为了减少网页加载图片量，开发人员常常讲页面用到的图标/logo等集合在一张图片里，使用时引入合适的坐标值即可。
背景图片如下：
这里写图片描述
用一个div实现精华两个字的显示，如下:

代码实现

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
    #jinghua{
        width:34px;
        height:19px;
        background-image:url(bg.png);
        /*背景图片偏移*/
        background-position:-243px -112px;
        margin:100px;
    }
  </style>
 </head>

 <body>
    <div id="jinghua"></div>
 </body>
</html>

ljl_web

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo7：背景截取图标显示

背景截取图片显示的实现实现效果为了减少网页加载图片量，开发人员常常讲页面用到的图标/logo等集合在一张图片里，使用时引入合适的坐标值即可。背景图片如下：用一个div实现精华两个字的显示，如下: 代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" />
复制链接

扫一扫