Css 背景图像上的不透明度倾斜

我正在制作一页的领带来练习Flexbox等

要做到这一点，我使用PSD文件，我有一些麻烦。 我想在我的背景上制作一个斜上边不透明度的矩形，我读过关于svg的文章，我应该这样做吗

我又有类似的问题。我有一张照片：

它应该看起来像：

---

提示将非常好

您可以使用CSS渐变来实现这一点

这里我有一个

，有两个背景：

形象

顶部的CSS线性渐变

渐变的锐利边缘起作用，因为有两个渐变步骤重合。这意味着渐变颜色从透明直接跳到50%蓝色

我使用了蓝色，所以它在这个例子中表现得很好。在你的情况下，把它换成棕色就行了

div{
宽度：1240px；
高度：648px；
背景：线性梯度（175度，rgba（0,0200,0）0%，rgba（0,0200,0）70%，rgba（0,0200,0.5）70%，rgba（0,0200,0.5）100%），
网址(https://i.stack.imgur.com/Rq6eR.jpg);
}

---

另一种没有梯度的方法

创建包装器 它可以是具有背景图像的div。重要的是您需要

溢出：隐藏

和

位置：相对

创建一个矩形并旋转它 您可以创建一个

：before

伪元素，如下所示：

.wrapper{
位置：相对位置；
宽度：100%；
高度：200px；
背景：红色；
溢出：隐藏；
}
.包装工：以前{
内容：''；
位置：绝对位置；
显示：块；
背景：蓝色；
不透明度：.5；
底部：-100px；
左：-100px；
右：-100px；
高度：150像素；
变换：旋转（-5度）；
}

看一看它可能会对您有所帮助，然后您只需要使用

不透明度

或使用

rgba（0,0,0,0.4）

背景的alpha通道来为您的div设置透明度。