0

これが重複していたらすみません。関連する投稿を調べたところ、私が扱っているものに似たものは見つかりませんでした。

ホバーすると不透明度が下がるイメージがあります。画像を含む DIV の上の DIV にテキストがありますが、これは画像の不透明度設定の影響を受けます。画像が透明になる間、テキストは無地のままであると想定されています。残念ながら、ホバーすると両方の要素が透明になります。テキストは親要素と見なされるため、画像の不透明度設定の影響を受けるべきではないと考えました。

html:

<div class="album large">
    <div class="writing">
        <h1>blah</h1>
    </div>
    <div class="opac">
        <img src="background/runaways.jpg">
    </div>
</div>

CSS:

.album img
    {
    display:block;
    margin: auto;
    }

.album.large
    {
    background-image: url('background/bigblack.jpg');
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 50px;
    }


.writing
    {
    position: absolute;
    color:red;
    left: 50%;
    margin-left: -270px;
    }

.opac img:hover
    {
    opacity: .4;
    filter:alpha(opacity=40);
    }
4

1 に答える 1

0

親 div の不透明度の問題を解決する

疑似要素を使用すると、これを取り除くことができます。詳細については、以下のリンクを確認してください。

于 2013-08-02T06:01:01.080 に答える