web-dev-qa-db-ja.com

親div webkit-filterが子に影響しないようにする

私は背景画像をグレースケールにするために非常に凝ったwebkitフィルターを使用しており、ホバーすると画像に色が付きます。

これがフィルターです

filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

ご覧のように、画像にフルカラーへのスムーズなフェードトランジションを提供するための「トランジション」プロパティもあります。私が抱えている問題は、それを適用しているdivがdiv内に配置されている子テキストにも影響を与え、テキストをグレースケールに変換することです。ホバーされていない場合でも、テキストは白である必要があるため、これは問題です。

子テキストで別のフィルターを使用してフィルターを無効にしてみましたが、機能していないようです...フィドルを確認してください

フィドル http://jsfiddle.net/yMHm4/1/

htmlcssslurp
17
little tiny man

ご想像のとおり、これはプロパティ継承の問題ではありません。

フィルターが機能する方法では、CSSで変化する属性を修正することが不可能になります。フィルターの影響を受ける要素がレンダリングされ、すべての子がレンダリングされ、結果として（画像として）フィルターが適用されます。

したがって、残っている唯一の選択肢は次のとおりです。

1）Lowkaseが提案したように、HTMLを変更します

2）あなたの場合、灰色にしたいのは背景画像だけです。この場合、HTMLをそのままにして、画像を疑似要素に表示し、フィルターをこの疑似要素に適用できます。

CSS

.cell{
    opacity:0.7;
    width:420px;
    height:420px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

#text {
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}
.cell:hover {
    opacity:1.0;
}

.A1:hover:before {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

フィドル

また、テキストがフィルターの影響を受けないように、フィルターをぼかしに変更しました。不透明度も設定されていたため、テキストの下にグレーが表示されていたため、テキストはまだgrayishのように見えました。

輝度フィルターを使用した例を追加（Webkit用）

デモ2

19
vals

BrにいくつかのHTMLエラーがありました。それらは/ brではなくbr /である必要があります。

次のソリューションでは、テキストコンテナーを画像divから取り出し、絶対配置要素として配置します。

http://jsfiddle.net/yMHm4/3/

#text {
    position:absolute;
    top:10px;
    left:25%;
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}

<div id="container">
    <div id="row">
        <div class="cell A1"></div>
        <div id="text">
            <b>SPINDRIFT KIOSK</b>
            <br/>
            Digital Collage
            <br/>
            <i>Mikey</i>
        </div>        
    </div>
</div>

CSSで「not」セレクターを使用することもできますが、ブラウザー間でどれほど使いやすいかはわかりません。このソリューションは、それを行うためのより単純な方法です。

1
Lowkase