偏向背景图像与不透明度

Question

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

要做到这一点，我使用PSD文件，我有一些麻烦。 我想在我的背景上制作一个带有不透明度的斜上方的矩形，我读到了关于svg的内容，我应该在这张照片上做到这一点：

(brown thing with opacity throughout the website view)

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

看起来应该是：

提示会很棒

Answer 1

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

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

1. 图片
2. 一个CSS线性渐变。

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

我使用了蓝色，因此在这个例子中它显示得很好。在您的情况下，只需将其切换为棕色。

＆＃13;
＆＃13;
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);
}
＆＃13;
<div></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

另一种没有渐变的方法。

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

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;