Html 线性梯度背景图像

我有几个关于线性梯度的问题：

是否可以使用实际图像而不是彩色显示器来代替

#ffffff

的

#000000

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

在上面的示例中也可能出现（50%宽度为黑色，然后30度垂直分割，然后50%为白色），因此，如果图像被替换#000000，是否可能在图像右侧沿30度分割线放置一个边框，将图像和颜色分开

---

谢谢

我不确定我做对了你需要什么，但这里有一个例子

。梯度图像{
宽度：128px；
高度：128px；
背景：
线性梯度（向右，
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.7)100%,，
网址(https://i.stack.imgur.com/ZXvxw.jpg?s=128&g=1);
}

---

这正是我想要的，所以如果绿色是纯色，它和图像之间的左侧是否可能有边框？