Question

是否可以在应用剪切路径后更改保留在chrome中的白色背景的颜色？

我已经尝试过背景剪辑方法，并且在看到其他疑问时也对CSS进行了一些调整

.header {
height: 100vh;
background-image: 
linear-gradient(to right bottom, 
rgba(204, 227, 233, 0.8),
rgba(6, 6, 7, 0.3)),   

background-repeat: round;
background-position: inherit;
position: relative;
background-clip: black;
clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 100%);
}

不起作用

Answer 1

您可以设置父元素的背景颜色。例如：

.header-container {
  background-color: black;
}

.header {
  height: 100vh;
  background-image: linear-gradient(
    to right bottom,
    rgba(204, 227, 233, 0.8),
    rgba(6, 6, 7, 0.3)
  );
  clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 100%);
}

<div class="header-container">
  <div class="header"></div>
</div>

更改剪切路径中的白色背景

1 个答案: