CSS如何从大图中抠取小图

2024-10-14 02:53:50

1、比如我们想要获取百度经验的收藏图标,如下图所示

CSS如何从大图中抠取小图

2、通过检查元素,我们可以找到图片的网址为https://exp.bdstatic.com/static/art足毂忍珩icle/pkg/article_sync_css_0_z_dd330c8.png,打开此网址我们会发现一张大图,如下所示:

CSS如何从大图中抠取小图

4、新建一个html文件,在body中藜局腑载添加一个div,设置div的样式如下,保证div的长度和宽度大于【步骤3】中的图片尺寸。div { height:2000px; width:400px; border:2px solid #aaa; margin:20px auto; background-image: url('https://exp.bdstatic.com/static/article/pkg/article_sync_css_0_z_dd330c8.png'); background-repeat: no-repeat; background-position: left top;}注意:此处的background-position先默认设为left top,表明目标图片的左侧与div的左侧对齐,且目标图像的上侧与div的上侧对齐

CSS如何从大图中抠取小图CSS如何从大图中抠取小图CSS如何从大图中抠取小图CSS如何从大图中抠取小图
猜你喜欢