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

Question

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

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

(brown thing with opacity throughout the website view)

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

它应该看起来像：

提示会很棒

Answer 1

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

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

图片
一个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(https://i.stack.imgur.com/Rq6eR.jpg);
}

<div></div>

Answer 2

另一种没有渐变的方法。

创建包装器 它可以是带有背景图像的 div。重要的是你需要 overflow: hidden 和 position: relative.

创建一个矩形并旋转它 您可以像这样创建一个 :before 伪元素：

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  background: red;
  overflow: hidden;
}

.wrapper:before {
  content: '';
  position: absolute;
  display: block;
  background: blue;
  opacity: .5;
  bottom: -100px;
  left: -100px;
  right: -100px;
  height: 150px;
  transform: rotate(-5deg);
}

<div class="wrapper"></div>

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

Slant on background image with opacity

css

svg

background

opacity