私は私たちのクライアントの1人のためのウェブサイトを作っています。私たちのデザイナーはブレンドを使用しました。最近ではCSSで行うことができるので、乗算します。私はサイトでそれを実装しましたが、要求された結果を得ることができず、可能であれば人々に尋ねたいと思っていました。"ブレンドからテキストを除外" CSSブレンディング
ケース：私はバックグラウンドでイメージの大きなヘッダーがあります。そのヘッダーの上に、mix-blend-mode：multiplyを持つ丸いdivを浮動させます。これは必要に応じて機能しますが、このdivにはテキストも混在しています。このテキストを「ブレンドしない」ようにすることはできますか？
望ましい効果：
それが今では何 
：事前に
ありがとう！
pseduo要素を使用し、親divの代わりにblend-modeを適用します。
div.header {
width: 100%;
height: 300px;
background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}
div.info-bol {
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
position: relative;
}
div.info-bol::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-color: red;
mix-blend-mode: multiply;
}
div.info-bol span {
position: relative;
top: 22%;
font-size: 30px;
font-weight: bold;
color: white;
}<div class="header">
<div class="info-bol">
<span>samenwerken<br>is meer dan<br>samen<br>werken</span>
</div>
</div>すごく反応してくれてありがとう！この解決策は私の問題を解決する！ – Bounder
mix-blend-modeは、すべての子供たちに影響を与えるため、あなたは、スパンを取る必要があります。
クローンを作成し、バックグラウンドなしに作成し、それを定位置にプッシュすることができます。
div.header{
width: 100%;
height: 300px;
background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}
div.info-bol{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
mix-blend-mode: multiply;
text-align: center;
color: #fff;
}
div.info-bol-clone{
position: relative;
width: 200px;
height: 200px;
text-align: center;
color: #fff;
bottom: 200px;
}
div.info-bol-clone span{
position: relative;
top: 22%;
font-size: 30px;
font-weight: bold
}<div class="header">
<div class="info-bol">
</div>
<div class="info-bol-clone">
<span>samenwerken<br>is meer dan<br>samen<br>werken</span>
</div>
</div>
我々は、我々は助けることができるアクションで問題を見ることができますフィドルやライブリンクを提供してください。 –
https://jsfiddle.net/cvz97yhr/ – Bounder
忙しく忙しかった、あなたが助けることを願って！ – Bounder