如何在css中创建叠加层？ [英] How can one create an overlay in css?

问题描述

我想创建一个任意大小的div，然后在div上面显示一些东西。什么是最好的方式来定位和确定覆盖面的大小与CSS中的div一样？ $ c $> position：absolute 在你的div中放置一个叠加层，然后像这样在所有方向上伸展它：

CSS ^{updated *}

  .overlay {
 position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
 background-color：rgba（0，0，0，0.85）; 
背景：URL（数据：; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK / OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC）重复滚动transparent\9; / * ie fallback png背景图片* / 
 z-index：9999; 
颜色：白色; 
 
 $ / code> 

您只需确保您的父div具有 position：relative 添加到它的属性和一个较低的 z-index 。

---

制作一个适用于所有浏览器的演示程序，包括IE7 +，适用于以下评论者。

演示

删除不透明度财产从CSS，而不是使用rGBA颜色给背景，只有背景，不透明度水平。这样，覆盖图携带的内容不会受到影响。由于IE不支持rGBA，因此我使用了IE hack，而不是使用base64编码的PNG背景图像来填充覆盖div，这样我们就可以避免IE不透明的问题，并将不透明度应用于子元素。

I'd like to create a div with an arbitrary size, then display something on top of that div. What is the best way to position and size the overlay exactly as the div below in css?

解决方案

You can use position:absolute to position an overlay inside of your div and then stretch it in all directions like so:

CSS ^{updated *}

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:9999;
    color:white;
}

You just need to make sure that your parent div has the position:relative property added to it and a lower z-index.

---

Made a demo that should work in all browsers, including IE7+, for a commenter below.

Demo

Removed the opacity property from the css and instead used an rGBA color to give the background, and only the background, an opacity level. This way the content that the overlay carries will not be affected. Since IE does not support rGBA i used an IE hack instead to give it an base64 encoded PNG background image that fills the overlay div instead, this way we can evade IEs opacity issue where it applies the opacity to the children elements as well.

这篇关于如何在css中创建叠加层？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！