覆盖CSS中的孔 [英] Hole in overlay with CSS

问题描述

例如，在这个小提琴中：http://jsfiddle.net/qaXRp/

我想要 < div id =center> 为透明，以便您可以看到< div id =underground> 。是否可以只用CSS或者我必须使用一些JavaScript？

解决方案

不。

$ b

如果您只对新浏览器感兴趣，可以使用 masking ：

规格： http://www.w3.org/TR/css-masking/

兼容性： http://caniuse.com/css-masks

边框/大纲

您也可以使用 border 或 css属性，如果你想创建模拟效果并设置它们的颜色到 transparent ，使它看起来很模糊。

位置绝对

您也可以使用位置：

 < div z-index：20>< / div> 
< div z-index：10> 
< div z-index：30> // top div is over child of this one 
< / div> 
  

透明度和元素

http://css-tricks.com/non- transparent-elements-inside-transparent-elements /

http：/ /css-tricks.com/examples/NonTransparentOverTransparent/

- 这不是你要的，但它可以帮助你:)

How is it possible to create a hole in an overlay where you can see through to the actual website?

For example in this fiddle: http://jsfiddle.net/qaXRp/

I want the <div id="center"> to be transparent so that you can see the <div id="underground">. Is it possible to do this only with CSS or do I have to use some JavaScript?

解决方案

No. This is not possible, not in most browsers.

CSS Masking

You can use masking, if you are interested only in new browsers:
Specs: http://www.w3.org/TR/css-masking/
Compatibility: http://caniuse.com/css-masks

Border / Outline

You can also use border or outline css properties if you want to create simular effect and set color of them to transparent so it looks simular.

Position Absolute

You can also use position:

<div z-index:20></div>
<div z-index:10>
    <div z-index:30> // top div is over child of this one
</div>

Transparency and elements

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
http://css-tricks.com/examples/NonTransparentOverTransparent/
-- this is not what are you asking for, but it can helps you :)

这篇关于覆盖CSS中的孔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！