我有把小提琴https://jsfiddle.net/obzpLy1g/
基本上它是一个红色圆圈内的图像。有没有可能在圆圈内分隔图像
我的html看起来像这样
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: cover;
background-position: center;
background-origin: padding-box;
background-clip: padding-box;
padding: 20px;
border: 1px solid red;
"></div>
我的代码没有像我希望的那样给予圆圈内的图像20px的填充。
3条答案
按热度按时间uajslkp61#
您需要将图像裁剪到
content-box
,而不是padding-box
nbnkbykc2#
为了确保你能把整张图片都放到圆圈里面,但仍然有20px的填充,这个代码片段把图片作为before伪元素的背景,这样它就不会被div的半径设置所剪切。
它设置包含的大小以确保所有图像可见。给定的图像是矩形而不是正方形,所以如果你不想看到无头鸡的话,剪辑它似乎没有意义。
注意:为了演示的目的,这个片段给div一个灰色背景,只是为了弄清楚图像的确切位置和大小。
gojuced73#
这是您要查找的内容吗?运行代码段!
background-clip:content-box;
在
content-box
内剪切图像如果不是你要求的,请告诉我,我会再试一次。