css 圆圈内的空间图像

v9tzhpje  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(125)

我有把小提琴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的填充。

uajslkp6

uajslkp61#

您需要将图像裁剪到content-box,而不是padding-box

<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
      background-size: contain;
      background-position: center;
      background-origin: content-box;
      background-clip: content-box;
      background-repeat: no-repeat;
      padding: 20px;
      border: 1px solid red;
    "></div>
nbnkbykc

nbnkbykc2#

为了确保你能把整张图片都放到圆圈里面,但仍然有20px的填充,这个代码片段把图片作为before伪元素的背景,这样它就不会被div的半径设置所剪切。
它设置包含的大小以确保所有图像可见。给定的图像是矩形而不是正方形,所以如果你不想看到无头鸡的话,剪辑它似乎没有意义。

div::before {
  content: '';
  width: calc(100% - (2 * var(--padding)));
  height: calc(100% - (2 * var(--padding)));
  position: absolute;
  background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      --padding: 20px;
      padding: var(--padding);
      border: 1px solid red;
      position: relative;
      background-color: #eeeeee;
    "></div>

注意:为了演示的目的,这个片段给div一个灰色背景,只是为了弄清楚图像的确切位置和大小。

gojuced7

gojuced73#

这是您要查找的内容吗?运行代码段!

<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: content-box;
      padding: 20px;
      border: 1px solid red;
    "></div>

background-clip:content-box;

content-box内剪切图像

如果不是你要求的,请告诉我,我会再试一次。

相关问题