使 div 的部分透明

Question

我发现一个网站的主体部分 div 透明，但没有使整个主体也透明。

这是通过屏蔽不同大小的 div 实现的吗？

Answer 1

此网站是在图像顶部使用白色背景实现的。白色背景有以下渐变样式：

.page {
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #FBFBFB 30vw);
}

Answer 2

如果您检查该页面，您会发现它具有 rgba 线性渐变，可提供您正在寻找的效果。在这种特定情况下，它位于 .page class:

.page {
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #FBFBFB 30vw);
}

检查网页是学习和实验的好方法。您可以尝试直接在开发工具中修改这些值，并立即在页面上看到效果。

Answer 3

查看站点的源代码，渐变的 css 是

linear-gradient(135deg, #fff0 0%, #FBFBFB 30vw)

这是一个片段

body {
  margin: 0px;
  background: url(https://ethanmarcotte.com/dist/img/relief.svg)
}

div {
  width: 100vw;
  height: 90vh;
  margin-top: 10vh;
  background: linear-gradient(135deg, #fff0 0%, #FBFBFB 30vw);
  text-align: right
}

<body>
  <div>Here is your Content</div>
</body>

Answer 4

它使用linear-gradient背景看看这个网站：linear-gradient

在提到的网站上，他们使用了：

background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #FBFBFB 30vw)

可以设置颜色，可以旋转渐变，还可以添加透明度（不透明度）。
他们在 body 上有一张背景图片，上面有一张 div，带有一些内容和渐变背景。
看看这个例子：

body{

background:url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold-vehicles-water-531880.jpg&fm=jpg) 0 50%,#FEFEFE;
}
#page{
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #FBFBFB 30vw);
width: 100%;
height: 400px;
padding: 0px;
margin: 0px;
}

<html>
<head></head>
<body>
<div id="page">

</div>
</body>
</html>

使 div 的部分透明

Making portions of div transparent

html

css

transparency