8

純粋なcssでステンシル効果を持つことが可能かどうか疑問に思います: 背景色を持つブロックと、親ブロックの背景を明らかにする色「透明」。

たとえば、背景としてグラデーションまたはパターンを持つ親ブロックがあり、テキスト コンテンツが親ブロックのグラデーションを表示する場所に黒い背景を持つブロックをオーバーレイしたいとします。

これを機能させる方法が見つかりませんでしたが、誰かがアイデアやヒントを持っているのではないでしょうか?

編集

申し訳ありませんが、私は十分に正確である必要はありません。

望ましい結果の図を次に示します。 ここに画像の説明を入力

4

5 に答える 5

4

CSS3 background-clipを使用できるかもしれません。次のように書きます。

HTML

<p>T</p>

CSS

p{
    font-size:50px;
    font-family:impact;
    background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg); 
    -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
position:relative;    
    width:80px;
    height:80px;
    text-align:center;
    padding-top:10px;
}
p:after{
    content:'';
    position:absolute;
    background:rgba(0,0,0,0.8);
    width:80px;
    height:80px;
    border-radius:100%;
    top:0;
    left:0;
    z-index:-1;
}
body{
    background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg); 
}

</p>

これをチェックしてくださいhttp://jsfiddle.net/rD6wq/6/

于 2012-04-23T16:37:05.097 に答える
1

http://www.google.com/webfonts/specimen/Allerta+Stencilなどの埋め込みフォントを使用するものは、必要なものに近い場合があります。背景とテキストの色を変更することで、探しているものが得られるはずです

于 2012-04-23T15:08:34.133 に答える
1 
#element_id {
    opacity:0.4;
    filter:alpha(opacity=40);
}

これにより、div または適用するものの不透明度が元の不透明度の 40% に設定されます (不透明度が既に低下している .png または .gif 画像にこれを適用しない限り、通常は 100% です)。

于 2012-04-23T15:58:23.240 に答える
1

私の知る限り、そのために SVG を使用できますが、簡単ではありません。

this (およびthis ) は、必要なものの最も近い実装である可能性があります。問題は、すべてのブラウザーで同じように機能するとは限らないことですが、より詳細な調査を試みることはできます。

Upd : Lea Verou は、彼女の記事でシンプルかつエレガントなソリューションを提示しました: Text masking — The standard way

于 2012-04-23T16:02:57.137 に答える
0

CSS3text-shadowプロパティで遊ぶことができます。

p{ text-shadow:0px 0px 2px #000 }

ここで私の例を参照してください。

プロパティに関する詳細情報はこちら。

于 2012-04-23T15:34:53.797 に答える