不透明度倾斜背景图像答案

【问题标题】：Slant on background image with opacity不透明度倾斜背景图像
【发布时间】：2018-11-11 19:32:00
【问题描述】：

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

为此，我使用的是 PSD 文件，但遇到了一些麻烦。我想在我的背景上制作带有不透明度的倾斜上侧的矩形，我阅读了关于 svg 的内容，我应该像这张图片一样使用它：

(brown thing with opacity throughout the website view)

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

它应该看起来像：

提示会很棒

【问题讨论】：

看看here 可能对你有帮助，然后你只需要使用opacity 或使用rgba(0,0,0,0.4) 背景的alpha 通道为你的div 设置透明度。跨度>

标签： css svg background opacity

【解决方案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);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案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);
}

&lt;div class="wrapper"&gt;&lt;/div&gt;

【讨论】：