css - 在不透明的背景图像上倾斜

Question

我正在制作一个单页网站来练习 Flexbox 等。

为此，我使用的是 PSD 文件，但遇到了一些麻烦。我想在我的背景上制作一个斜上侧不透明的矩形，我读到了 svg 并且我应该像这张照片一样这样做:

(brown thing with opacity throughout the website view)

我又遇到了类似的问题。我有一张照片:

它应该看起来像:

小费会很棒

Answer 1

您可以使用 CSS 渐变来做到这一点。

这里我有一个 <div>有两个背景:

1. 图片
2. 在其上添加 CSS 线性渐变。

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

我使用了蓝色，所以它在这个例子中表现得很好。在您的情况下，只需将其切换为棕色即可。

div {
  width: 1240px;
  height: 648px;
  background: linear-gradient(175deg, rgba(0,0,200,0) 0%, rgba(0,0,200,0) 70%, rgba(0,0,200,0.5) 70%, rgba(0,0,200,0.5) 100%),
              url(/image/Rq6eR.jpg);
}

<div></div>