4

私は次のコードを持っています:

html...

<div id="solidcolor">
    <div class="transcolor">transcolor
        <div class="notranscolor">some text</div>
    </div>
</div>

css..

#solidcolor{
    background: url("http://i45.tinypic.com/o5aycp.gif") repeat; 
    width: 200px; 
    height: 200px;
}
.transcolor{
    background: blue; 
    opacity: 0.4; 
    height: 100px;
}
.notranscolor{
    background: red; /* I want this color to solid color not transparent color*/
}

デモ

編集メモ線形グラデーション カラーを設定する必要があるため、rgba() メソッドを使用して背景色を設定できませんでした。

編集1

絶対配置も適用した後でも、これに対する適切な解決策を得ることができませんでした。しかし、次のアイデアは calc() メソッドでこれを行いたいのですが、終了しません。何か案が？

編集2

@rokburgarが答えを述べているように、絶対位置を適用しても問題を解決できませんでした。しかし、不透明度を 1.25 に設定したかったのですが、これは 0 から 1 にする必要があることはわかっていますが、彼はこの 0.8 * 1.25 = 1 のように 0.4 * 1.0 = 0.4 と述べています。

4

2 に答える 2

0

opactiy は継承されるため、要素ごとに opacity を個別に指定する必要があります。使用できる 1 つの方法は、次spanのように、透明な色付きのテキストのみを別の で定義することです。

HTML

<div id="solidcolor">
    <div>
        <span class="transcolor">some transparent text</span>
        <div>some normal text</div>
    </div>
</div>

CSS

.transcolor {
    opacity: 0.4;
}

使用できる別の方法は、次のような個別の div です。

HTML

<div id="solidcolor">
    <div>
        <div class="transcolor">some transparent text</div>
        <div>some normal text</div>
    </div>
</div>

CSS

.transcolor {
    opacity: 0.4;
}
于 2013-04-21T08:03:11.220 に答える
0

不透明度は継承され、単純に削除することはできません。子要素の透明度をリセットできることが期待されます。

ここで行ったことは、次のことを意味します。

.notranscolor -> opacity: 0.4 * 1.0 = 0.4

解決：

子divのコンテンツを絶対に配置します。

透明度のトリック

于 2013-04-21T08:06:50.337 に答える