CSS从大图中抠图然后显示其中的一部分
2024-08-27 23:35:16
相信大家在使用css时会遇到一个情况吧 就是一张大图片里面什么都有 各种图标都有 然而自己就是不太会使用其中的小图标 这是我最近的一次学习 首先上图
这么大一张图片 那么这么使其只显示一部分 并且为我所用勒 这是上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
}
#image{
width: 40px;
height: 40px;
background-image: url(img/su.jpg);
background-repeat: no-repeat;
background-position: -200px -240px;
/*申明 大图片是有了 40px一个 每个直接间距为40px 而且第一个表示距离x的距离 第二个表示距离y的距离*/
}
</style>
</head>
<body>
<diV id="image"> </diV>
</body>
</html>
核心的代码是
<style>
#image{
width: 40px;
height: 40px;
background-image: url(img/su.jpg);
background-repeat: no-repeat;
background-position: -200px -240px;
/*申明 大图片是有了 40px一个 每个直接间距为40px 而且第一个表示距离x的距离 第二个表示距离y的距离*/
}
</style>
<diV id="image"> </diV>
这里将div设置为id为image 而且这个文件的路径url(img/su.jpg)这些都必须设置好 这样就能够使用这个大图片了
显示效果是这样的
最新文章
- 关于这个博客以及C++入门该懂的一些东西
- npm设置prefix 路径
- win8.1中安装sql2014 0x800F0906 【 Error while enabling Windows feature : NetFx3, Error Code : -2146498298 】
- iOS - Bitcode App 瘦身中间码
- Netty_Netty系列之Netty百万级推送服务设计要点
- Android显示等宽图片的问题
- MyISAM和InnoDB的索引在实现上的不同
- UITableViewCell 设置圆角
- sql主键的一点重要理解
- WebAPi(selfhost)
- 【贪心】Bzoj 2457:[BeiJing2011]双端队列
- Git入门——基础知识问答
- Bootstrap入门(二十)组件14:警告框
- npm killed有可能是内存不够, 为Ubuntu增加swap
- 在react中使用vis.js
- W10笔记本电脑弄成WIFI
- tarjan求双联通分量(割点,割边)
- 43-2-CAN协议
- Ubuntu 14.04 安装 Blender,并放桌面
- C#基础第六天-作业答案-利用面向对象的思想去实现名片