隐藏可见性时保留框阴影

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

// 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;
}

(JSFiddle中的代码(

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

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

。

您可以通过

放弃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 > * 规则设置要隐藏的任何子元素。

使用伪元素。

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

.HTML

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

.CSS

 html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
body {
  background-color: red;
}
.cont {
  width: 150px;
  height: 150px;
  margin: 30px 15px;
  background-color: rgba(0,0,0,0)
}
.cont:after {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  box-shadow: 0px 10px 22px blue;
}

为了回应@Scott辛普森和@Nitzan托默，你的问题可能是，而不是使用:after，在较新的浏览器上使用::after(带有两个冒号(更受支持。

文档

一种便宜的方法是使用 <img> 标签而不设置 src 属性(😱是的，您没看错(，而只设置 width 和 height 属性，并给它一个box-shadow。
而且，如果您想将其放在其他东西上，请设置position: absolute;，您可以将其放在需要的地方。
要复制的简单行：
<img width="100px" height="100px" style="box-shadow: 0px 0px 10px 5px;">
例：

var rv = Math.round(Math.random()*255);
var gv = Math.round(Math.random()*255);
var bv = Math.round(Math.random()*255);

p {
    text-shadow: 0px 0px 3px white;
}
img {
  box-shadow: 0px 0px 10px 5px;
}

<body id="bd" style="background-color: whitesmoke;" onclick="
rv=Math.round(Math.random()*100); 
gv=Math.round(Math.random()*100); 
bv=Math.round(Math.random()*100); 
document.getElementById('bd').style.backgroundColor = 'rgb('+rv+', '+gv+', '+bv+')'
"
>
<p>(Click to Change Background Color [to see that it's transparent])</p>
<img width="100px" height="100px"><br>
<p>Over something else:</p>
<p>Words and an image <br>here for you to see <br>the square over something.</p>
<img src="https://images.unsplash.com/photo-1600716051809-e997e11a5d52?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" width="120px" style="box-shadow: 0px 0px;">
<img width="100px" height="100px" style="position: absolute; top: 224px; left: 36px;"><br>
</body>

或者，根据元素，只需设置 background-color: transparent 和/或 background-image: none .

相关内容

最新更新

热门标签：