Css 部分div透明？

是否可以仅使div的一部分透明，就像div中的空间量一样

例如，从div顶部选择100px，并且顶部的100px设置了不透明度

---

我该怎么做呢？

或者您可以使用半透明的PNG（顶部透明，底部不透明）创建右侧背景图像；您可以使用两个子div，每个子div都有自己的背景色，其中一个带有rgba，用于透明部分。

您可以执行以下操作：

尝试背景图像，其中一半是透明的，另一半不是

使用CSS渐变时，一半是透明的，另一半不是。例：

background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */

<div>
   <div id="transparent" style="background: transparent"></div>
   <div id="not-transparent" style="background: #000"></div>
</div>

使用多个div，其中一个具有透明BG，另一个没有。例：

background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */

<div>
   <div id="transparent" style="background: transparent"></div>
   <div id="not-transparent" style="background: #000"></div>
</div>

我相信还有其他的方法，但这是我想到的前三种方法

---

祝您好运。

您可以使用css3属性和伪元素来创建此效果：

诀窍是使用：before或：after伪元素绘制一个长方体。我们可以将背景属性应用于内部半透明背景。而对于外部背景，我们可以使用一个大的框阴影值

HTML:

html， 身体{ 身高：100%； } 身体{ 背景：顶部线性梯度，ff5a00，ffae00 100%； 保证金：0； } .盒子{ 位置：相对位置； 利润率：30px 20px； 溢出：隐藏； 高度：120px； 宽度：250px； } .盒子：以前{ 背景：rgba0,0,0,0.3； 盒影：0 1000px 000； 位置：绝对位置； 高度：50px； 宽度：50px； 内容：； 左：0； 排名：0； }

---

你是想做一个梯度，还是想偏移一个图像？或者你想要一个纯色的背景色？当你的问题解决后，别忘了将答案标记为已接受，这将有助于你在这里赢得声誉。我使用这个答案时使用了不透明度+背景，而不是框阴影，效果很好