html - 具有线性渐变的背景图像

Question

我有几个关于线性渐变的问题:

是否可以使用实际图像而不是彩色显示来代替 #ffffff 的 #000000？

background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%);  

在上面的例子中也是可能的(50% 的宽度是黑色，然后是 30 度的垂直分割，然后是 50% 的白色)，所以如果图像替换 #000000，是否可以在图像的右手边沿 30 度分界线将图像和颜色分开？

谢谢!

Answer 1

我不确定我是否正确理解了您的需求，但这是一个示例。

.gradient-image {
  width:128px;
  height:128px;
  background: 
  linear-gradient(to right, 
  rgba(0,0,0,0) 0%, 
  rgba(0,0,0,0) 60%, 
  rgba(0,0,0,1) 61%, 
  rgba(0,0,0,1) 65%,
  rgba(0,0,0,0.7) 66%,
  rgba(0,0,0,0.7) 100%),
  url(/image/ZXvxw.jpg?s=128&g=1);
}

<div class="gradient-image"></div>