Question

我正在尝试在不透明度为60％的DIV中添加图像和文本框。由于某种原因，这两个对象也继承了不透明度。我该如何预防？

HTML：

<body>
<div id="sliderdiv">
<div id="slider">
            <img src="i2.jpg" alt="" />
            <img src="i3.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="i4.jpg" alt="#htmlcaption" />
            <img src="i5.jpg" />
        </div>
        <div id="htmlcaption" style="display: none;">
            <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
        </div>

</div>
<div id="bg">
    <img src="wmlogo.jpg" width="140" height="30" alt="Westmed Medical Group" title="Westmed Medical Group Homepage" id="logoimg" />
    <input type=text size=25 id=insidebgtext />
</div>
</body>

CSS：

* {
    background-color: #CC0000;
    padding: 0px;
    margin: 0px;
}
#bg {
    position: absolute;
    background-color: #000000;
    height: 50px;
    width: 100%;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    z-index: 1;
}
#insidebgtext {
    position: absolute;
    top: 25%;
    right: 20%;
    background-color: #FFFFFF;
    z-index: 25;
}
#sliderdiv
{
position:absolute;
left:0px;
top:0px;
width: 100%;
height: 306px;
z-index:-1;
background-color: #FCFCFC;
}

#logoimg {
    position: absolute;
    top: 15%;
    left: 25%;
    z-index: 25;
}

它是如何出现的：

enter image description here

Answer 1

孩子父母属性的继承非常明显。为了您的目的，您可以使用使用透明png图像作为背景的代理方式，并避免使用不透明度。

如何在DIV中添加对象并显示在DIV上方

1 个答案: