web-dev-qa-db-ja.com

親divに不透明度を設定し、子divに影響を与えない方法は？

ちょっと私はグーグルで検索していますが、完璧な答えを罰することはできません

親DIVで不透明にしたいが、子DIVではしたくない

例

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

Css

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

注：-やりたい背景画像 in Parent Div not color

csscss3parent-childopacity
70
Rohit Azad

:after擬似クラスでbackground-imageを定義すると良いかもしれません。このように書く：

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

これを確認してください fiddle

43
sandeep

私はこれが古いことを知っていますが、万が一他の人を助ける場合に備えて。

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>

ここで、rgbaは赤、緑、青、aは透明度です。

77
PaulSatcom

あなたはそれを行うことができます疑似要素で：（ demo on dabblet.com ） enter image description here

マークアップ：

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

css：

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.2;
    width: 400px;
    height: 200px;
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 
}

.child{
    Color:black;
}
16
Vladimir Starkov

トムが述べたように、background-color: rgba(229,229,229, 0.85)はトリックを行うことができます。親要素のスタイルに配置し、子は影響を受けません。

6
Rik

できません。今日のCssはそれを許可していません。

論理レンダリングモデルは次のとおりです。

オブジェクトがコンテナ要素の場合、コンテナ要素のコンテンツが、マスクの各ピクセルの値がであるマスクを使用して現在の背景とブレンドされたかのようになります。

参照： css透明度

解決策は、異なる要素構成を使用することです。通常、今日は子として定義されているものに対して固定または計算された位置を使用します。あなたのコード。

Cssを使用したソリューション： fiddle

.parent {
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;
}
.child {
    position: fixed;
    top:0;
}

JavaScriptを使用した別のソリューション： fiddle

5
Denys Séguret

私は同じ問題を抱えていて、親タグの背景として透明なPNG画像を設定することで修正しました。

これは、黒い背景の不透明度60％で作成した1px x 1px PNG画像です ！

1
Prakash Thangavelu

親から子を取り出して、配置によって配置しない限り、それを行うことはできません。

私が知っている、実際に機能する唯一の方法は、親の背景に透明な画像を使用（透明度のある.png）を使用することです。唯一の欠点は、CSSを介して不透明度を制御できないことです。

0
jackJoe