是否有任何方法使背景图像本身调整为css元素的剪贴路径设置?

Question

我希望我的背景图像遵循其元素的形状。比如我把元素的clip-path设为:clip-path: polygon(0 0, 50% 10%, 50% 90%, 0% 100%);我想让背景图像改变它的大小和宽高比，以匹配元素的剪辑路径。

我所尝试的一切都是裁剪背景图像，而不是重塑，拉伸或挤压。

Answer 1

您可以使用background-size并最终将剪贴路径的一些坐标设置为css var()，以便它可以被background-size:

使用这里是clip-path 中的一个例子

html {
background:green;
--clipRight: 50%;/* value setting how far from left you clip the element */
}
body {
margin:0;
min-height:100vh;/* min-height because demo has no content to fill and stretch body */
clip-path: polygon(0 0, var(--clipRight) 10%, var(--clipRight) 90%, 0% 100%); 
background:url(https://dummyimage.com/300)  0 0 / var(--clipRight) 100% no-repeat yellow;
}

注意你可能还需要为HTML和body设置不同的背景，以确保你调整大小的图像绘制在body上，而不是转移到HTML上。