3

CMS を使用して、ページの上部に「ヒーロー エリア」を構築しています。背景画像、いくつかのテキスト、およびいくつかのボタン リンクがあります。mix-blend-mode:multiplyボタンを背景画像に合わせたい。

私の問題は、デフォルトの CMS CSS がボタンを背景画像とは異なるスタック コンテキストに配置するため、ボタンがブレンドされないことです。具体的には、.innerクラスにposition:relativeとがあることが問題ですz-index:1。CSS を上書きして同じコンテキストposition: staticに配置すると、セクション全体のレイアウトが崩れます。

を取り除かずbuttonに をブレンドするための回避策はありますか?.outerposition:relative.inner

.outer
{
    padding: 50px;
    background: url(https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg); 
    background-size: 300px 300px;
    height: 200px;
    width: 200px;
}
.inner {
    position: relative; 
    z-index: 1; 
}
button { 
    background-color: rgba(18,76,150,0.87);
    color: #ffffff;
    mix-blend-mode: multiply; 
    padding: 25px;
    display:block;
}
<div class="outer">
    <div class="inner">
        <button>(Different stack) Does not blend</button>
    </div>
    <div>
        <button>(Same stack) Does blend</button>
    </div>
</div>

4

1 に答える 1

2

mix-blend-mode: multiply;z-index された要素のスタイルにも追加すると、機能するようです( fiddle を参照)。冗長に見えますが、うまくいくようです。

于 2016-05-07T20:06:03.923 に答える