背景图像与线性渐变

Question

我对线性渐变有几个问题：

是否可以使用实际图像而不是彩色显示而不是#000000的{​​{1}}？

#ffffff

在上面的例子中也是可能的（黑色为50％宽度然后是30度垂直分割然后白色为50％），所以如果图像替换为＃000000，是否可以在图像的右手沿着30度的分界，分隔图像和颜色？

谢谢！

Answer 1

我不确定我对你需要什么，但这是一个例子。

＆＃13;

＆＃13;

.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(https://i.stack.imgur.com/ZXvxw.jpg?s=128&g=1);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;