0

有什么方法可以使内容/图像在<div>具有透明度的内部不透明？

这是HTML：

    <div id="main-button-wrapper" class="left">

        <div id="button-bg-layer" class="box-bg-layer corners"></div>

        <div class="buttons-bg-overlay box-bg-overlay corners">

            <img alt="Test" src="http://www.schroff.co.uk/railway/src/symbol_test.gif" />

        </div>

    </div>

CSS：

#main-button-wrapper {
    height: 319px;
    margin-left: 22px;
    position: relative;
    width: 321px;
}

#button-bg-layer {
    position: absolute;
    right: 0;
    height: 319px;
    width: 321px;
}

.buttons-bg-overlay {
    position: relative;
    right: 0;
    margin: 11px;
    height: 66px;
    width: 299px;
    text-align: center;
    padding-top: 26px;
}

#buttons-wrapper {
    position: relative;
    width: 299px;
    height: 297px;
    z-index: 3;
    margin: 22px;
}

/* Background Layers */

.box-bg-layer {
    background-color: #010101;
    z-index: 1;
    zoom: 1;
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

.box-bg-overlay {
    background-color: #010101;
    z-index: 2;
    zoom: 1;
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

我试过z-index: 4;在图像上加一个。我能想到的唯一另一种方法是将 div 背景设置为绝对定位，然后将内容定位在 div 之外，但必须有更简单的方法吗？

任何帮助将非常感激！

请参阅 JSFiddle：

http://jsfiddle.net/Sa8jw/

4

2 回答 2

5

而不是使用opacityuse rgbawherea代表alpha. 这将使子元素不透明......

background-color: rgba(0,0,0,.5); /* RGBA for #010101 will be rgba(1,1,1,.4) */

其中.4fora相当于opacity: 0.4

演示

于 2013-11-06T07:16:29.737 回答
1

这是一个 js fiddle 为您提供帮助:-)

小提琴

和更改的代码。不透明度被添加到伪类之后

    #main-button-wrapper {
    height: 319px;
    margin-left: 22px;
    position: relative;
    width: 321px;
}

#button-bg-layer {
    position: absolute;
    right: 0;
    height: 319px;
    width: 321px;
}

.buttons-bg-overlay {
    position: relative;
    right: 0;
    margin: 11px;
    height: 66px;
    width: 299px;
    text-align: center;
    padding-top: 26px;
}

#buttons-wrapper {
    position: relative;
    width: 299px;
    height: 297px;
    z-index: 3;
    margin: 22px;
}

/* Background Layers */
.box-bg-layer{
background-color: #010101;
    z-index: 1;
zoom: 1;}
.box-bg-layer : after{

    filter: alpha(opacity=40);
    opacity: 0.4;   
}
.box-bg-overlay {   background-color: red;
    z-index: 2;
    zoom: 1;
}
.box-bg-overlay :after{
    filter: alpha(opacity=40);
    opacity: 0.4;   
}
于 2013-11-06T13:06:38.533 回答