除边框外，使元素透明吗？

Question

是否可以使用纯CSS使整个元素除以使其边框或轮廓不可见？通过“隐形”，我的意思是完全透明（即visibility: hidden;或opacity: 0;）具有可见的周围边界。所有文字，儿童，背景等都将被隐藏。

我知道这可以通过在不可见元素周围创建父div来实现，但我很好奇是否可以在不更改HTML的情况下实现相同的效果。

可以这样做吗？

Answer 1

嗯，我认为是：

<强> HTML

<div id="element">
  ...
</div>

<强> CSS

#element {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

#element * {
  opacity: 0;
}

Answer 2

您可以使用子选择执行类似的操作。

Example

<div class="box">
  <p>some child content</p>
</div>

.box{
  width: 100px;
  height: 100px;
  border:5px solid black;

}
.box >* {
  opacity: 0;
}

Answer 3

您可以使用RGB作为颜色来实现这一目标，请看一下：

LIVE DEMO

风格：

body{ background:red;}
div{
    width:100px;
    height:60px;
    border:4px solid black;
    background:rgba(255,255,255,.2);
}

div *{ opacity:0;}

标记：

<div>
    <span>Guten Morgen</span>
</div>