1

URL から背景画像を取得したい (そのため、不透明度を手動で編集することはできません) 不透明度
が低く、その上にコンテンツを書き込みます:
ただし、コンテンツは通常の不透明度 1 にする必要があります。

http://jsfiddle.net/ca11111/BAJN5/

編集: http://jsfiddle.net/ca11111/BAJN5/1/わずかに良い

4

5 に答える 5

2

opacityプロパティは継承されます。要素に < 1を設定opacityすると、そのすべての子要素にも < 1 の値が設定されopacity、これを変更することはできません。

目的を実現する最も簡単な方法は、複数の背景を使用し、画像の上に半透明の背景を配置することです。もちろん、これはブラウザーの互換性の問題を引き起こします (複数の背景のサポートとグラデーションのサポートを参照してください)。

例: http://dabblet.com/gist/2818293 (IE10、Opera 11+、およびその他のデスクトップ ブラウザーのすべての非恐竜バージョンで動作するはずです)

親に背景を設定せず、独自の子を持たない子 (または疑似要素) に背景を設定するオプションもありますz-index。rgbaバックグラウンド）。

于 2012-05-28T09:53:43.857 に答える
1

このようなことを意味しますか？http://jsfiddle.net/BAJN5/2/

このように設定してみてください：

<div style="position:relative"> <!-- wrapper div (relative) -->
    <div style="background:url(an-image-url) no-repeat center center; opacity:0.5; height:220px"></div> <!-- half opacity background -->
    <span style="opacity:1; position:absolute; z-index:1"><!-- full opacity (absolute) -->
        some text
        ......
    </span>
</div>
于 2012-05-28T10:06:31.687 に答える
1

疑似要素 :before & :after を使用して作成したことを確認してください

HTML

<div class="addFav">
 <div>asdfasfasfafs</div>
</div>

CSS

.addFav:before {
    background:url(http://lorempixel.com/400/200/sports) no-repeat;
    border:1px solid red;
    height:200px;
    width:400px;
    color:#000;
    padding:15px;
    position:absolute;
    content:"";
    opacity:0.1;    
}


.addFav {
    height:200px;
    width:400px;
    color:red;
    padding:15px;
    position:relative
}

デモを参照してください:- http://jsfiddle.net/8LFLd/66/

ここでデモを更新 http://jsfiddle.net/8LFLd/68/

于 2012-05-28T10:12:25.617 に答える
0

このページでは、疑似要素を使用して背景画像の不透明度をエミュレートする手法を示します

于 2012-05-28T09:49:39.373 に答える
0

ねえ、あなたはこれが欲しいと思う

Main Div rgbaプロパティを定義する

div {
   background: rgba(200, 54, 54, 0.5);
}

詳細http://css-tricks.com/rgba-browser-support/

于 2012-05-28T09:53:31.163 に答える