Question

我遇到了一个网站，该网站的主体div部分是透明的，而整个主体也没有透明。

这是通过阻止不同大小的div来实现的吗？

Answer 1

如果您检查页面，则可以看到它具有rgba线性渐变，可以提供您想要的效果。在这种情况下，它位于.page类中：

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

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

Answer 2

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

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

您可以设置颜色，可以旋转渐变，还可以添加透明度（不透明度）。
它们在主体上具有背景图像，并在其上方具有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的部分透明

4 个答案: