Question

我正在Wordpress中为我的家乡创建一个网站。因为我希望用户看到整个背景图像，所以我修改了主div的透明属性。到现在为止还挺好。但是，我也希望在网站上有一个Google地图框。由于它也是主要div的一部分，因此Google地图框也是透明的（这使得很难看到发生了什么）。我想知道是否有办法为Google地图框添加主div透明度的例外。

非常感谢任何想法。

这是我使用的CSS3代码。 cbox是需要0.80透明的主要div。 gmapsframe是Google地图的框。

.cbox {
        overflow: hidden;
    width: 958px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    background: url("images/cbox.png") center 1px no-repeat;
        background-color: rgba(0, 0, 0, 0.8);
}

.gmapsframe {
     background-color: rgba(0, 0, 0, 1);
}

它似乎根本不起作用。

Answer 1

有两种方法可以做到这一点，

选项1是覆盖父透明度。将其应用于地图div

<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>

    <div id=mapDiv style='background-color: rgba(0, 0, 0, 1);'></div>

</div>

这是一个JS小提琴示例：http://jsfiddle.net/V9Y5f/

选项2是使用绝对或相对定位：

<div id='containerDiv'>

    <div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>

    </div>    

    <div id='mapDiv' style='position: relative; top: -30px;'></div>

</div>

这是一个使用相对定位的JS小提琴示例：http://jsfiddle.net/p7TXU/

Answer 2

不使用CSS的opacity属性，而是在父级上使用rgba，因为它处理不透明度，并且不会影响任何子级。

Ps。：你不需要改变那个div的任何孩子的透明度。

More info regarding rgba

停止div透明度，然后重新创建它

2 个答案: