背景图片通过透明背景图片显示

Question

我正在尝试为网站创建横幅。出于 SEO 的目的，我决定看看是否可以创建类型的横幅而不是导入的图像。我取得了不错的进展，但由于某种原因，我的背景图片通过覆盖在其上的徽标显示出来。

我将背景图像（在 css 中设置）设置为不透明度，因为我不希望它充分发挥作用。我在它上面放置了具有透明背景但没有不透明度的徽标。

目标横幅位于：

http://arielbalter.com/cio/

我正在尝试的代码位于：

http://jsfiddle.net/abalter/QzNpQ/

*** HTML *****

<header>
    <div id="outer">
        <div id="background-image"></div>
        <div id="logo">
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png" />
    </div>
        <div id="lines">
            <h1 id="line1">check it out!</h1>
            <h1 id="line2">Home Inspection</h1>
        </div>
    </div>
</header>

** CSS ****

header {
    border: 3px double black;
    width: 100%;
    height: 7em;
}
#outer {
    background-size: 100% 100%;
    height: 100%;
    position: relative;
}
#background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
#logo {
    float: left;
    border: 1px dashed green;
    height: 100%;
}
#logo img {
    height: 100%;
}
#lines {
    display: inline-block;
    border: 2px dotted blue;
    top: 0;
    bottom: 0;
}
#line1 {
    display: block;
    position: relative;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-weight: bold;
    font-size: 3em;
    color: FireBrick;
    padding: 0.1em 0 0 0;
    margin: 0 0 -0.4em 0;
    border: 2px dashed green;
    letter-spacing: 0.05em;
}
#line2 {
    display: block;
    position: relative;
    font-family:"Trebuchet", sans-serif;
    font-size: 2em;
    color: black;
    font-weight: bold;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: 2px dashed orange;
    font-variant: small-caps;
}

谢谢！

Answer 1

诊断：

根据我对您的 CSS 的了解，#background-image 的不透明度正在影响 #logo 的不透明度。

解决方案 1：

如果可能，请考虑使用 background-color: rgba(x,y,z,a) 的父元素而不是照片的背景颜色，其中数字 a 负责不透明度。

解决方案 2：

如果您想在顶部使用两个图像，并且只有父元素具有不透明度，position absolute 将帮助您将它们显示在单独的 div 中，而不会出现任何不透明度问题。