Question

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

例如，您从div顶部选择100px，而顶部100px是否设置了不透明度？

我该怎么做？

Answer 1

你可以做几件事：

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

使用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，其中一个具有透明BG而另一个不具有透明BG。例如：

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

我确信还有其他方法，但这些是我想到的前三个方法。

Answer 2

使用半透明PNG（顶部透明，底部不透明）创建右background-image;要么使用两个子div，每个子div都有自己的background-color（其中一个用透明部分用rgba）。

Answer 3

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

诀窍是绘制一个包含:before或:after伪元素的框。我们可以将background属性应用于内部半透明背景。对于外background，我们可以使用较大的box-shadow值。

<强> HTML：

<div class="box"></div>

<强> CSS：

.box {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 250px;
}

.box:before {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1000px #000;
  position: absolute;
  height: 50px;
  width: 50px;
  content: '';
  left: 0;
  top: 0;
}

＆＃13;

html,
body {
  height: 100%;
}

body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}

.box {
  position: relative;
  margin: 30px 20px;
  overflow: hidden;
  height: 120px;
  width: 250px;
}

.box:before {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1000px #000;
  position: absolute;
  height: 50px;
  width: 50px;
  content: '';
  left: 0;
  top: 0;
}

＆＃13;

<div class="box"></div>

＆＃13;

div透明的一部分？

3 个答案: