Question

我试图隐藏一个元素，但保持它的阴影可见。例如：

// html
<div id="c1" class="cont"></div>
<div id="c2" class="cont"></div>

和

// css
html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
}

.cont {
  width: 150px;
  height: 150px;
  margin: 30px 15px;
  box-shadow: 0px 10px 22px #808aa8;
  background-color: #c2cff2;
}

#c2 {
  visibility: hidden;
}

（code in JSFiddle）

我希望隐藏c2（背景不应该可见），但阴影应该是可见的。
现在你可以看到c1。

我可以将每个这样的div包装在另一个容器中，并在容器上有阴影的同时隐藏内部div，但是我想知道它是否可以在没有它的情况下实现。

Answer 1

您可以通过放弃visibility: hidden;来实现这一目标。如果淡出背景，并从元素中删除pointer-events，它应该会产生相同的效果。

body {
  background-color: #ffffff;
}

.cont {
  width: 150px;
  height: 150px;
  margin: 30px 15px;
  box-shadow: 0px 10px 22px #808aa8;
  background-color: #c2cff2;
}

#c2 {
  color: transparent;
  background-color: transparent;
  pointer-events: none;
}
#c2 > * {
  display: none;
}

<div id="c1" class="cont">
  Hello <img src="#">
</div>
<div id="c2" class="cont">
  Hello <img src="#">
</div>

pointer-events: none;样式允许元素“点击”，这意味着下面的任何内容（表单元素，按钮等）仍然可以与之交互，因此根据您的要求，您可能实际上并不需要它。

如果元素的内容也需要淡出，您可以在父级上设置color: transparent以隐藏任何文本，然后使用#c2 > *规则设置要隐藏的所有子元素。

Answer 2

使用伪元素。

https://jsfiddle.net/9fssfufk/5/

<强> HTML

"\t" * intent

<强> CSS

<div id="c1" class="cont"></div>

隐藏可见性时保持框阴影

2 个答案: