html - 你知道一种在 CSS 剪辑路径中自动输入和包含背景图像的方法吗？

Question

这是我的演示：

• clip_background_contain [单个] => https://codepen.io/joondoe/pen/ExxGdZz?editors=0100
• clip_background_contain [容器] => https://codepen.io/joondoe/pen/qBBLJMb

我将向您展示 clip_background_contain [single] 的演示片段。我的问题是，目前我正在使用百分比将剪辑路径内的背景居中。这是一种近似方法，我想知道是否有一些自动的数学方法可以实现这个结果？

例如像 acenter的属性，你也会发现contains属性似乎让我的背景在clip_background_contain [container]中消失。

这是我的clip_background_contain [single]的 css 片段：

.circle_clip{
/*   padding:10vh; */
  width:50vw;
  height:50vh;
  background:black url(https://www.wallpaperup.com/uploads/wallpapers/2018/02/12/1206351/b0ba2e531146059beef0384f3cb02abc-700.jpg) center 50%/50% no-repeat;
  
  clip-path:circle(30%);
/*   bakcground-size: 63px 100%; */


}

<div class="circle_clip"/>

感谢您的任何提示

标签： htmlcss