我正在制作一个单页网站来练习 Flexbox 等。
为此,我使用的是 PSD 文件,但遇到了一些麻烦。 我想在我的背景上制作一个斜上侧不透明的矩形,我读到了 svg 并且我应该像这张照片一样这样做:
(brown thing with opacity throughout the website view)
小费会很棒
最佳答案
您可以使用 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(/image/Rq6eR.jpg);
}
<div></div>
关于css - 在不透明的背景图像上倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50647120/