0

Web サイトのバナーを作成しようとしています。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;
}

ありがとう！

4

1 に答える 1

3

診断：

あなたの CSS に基づいて私が理解していることから、不透明度 on#background-imageは の不透明度に影響を与えてい#logoます。

解決策 1:

可能であれば、写真の代わりにbackground-color: rgba(x,y,z,a)、番号aが不透明度の原因となる親要素に背景色を使用することを検討してください。

解決策 2:

不透明度を持つ親要素のみを使用して 2 つの画像を重ねて使用する場合は、 position absolute不透明度の問題なしに別々の div に表示するのに役立ちます。

于 2013-08-14T17:49:04.430 に答える