2

グラデーションが背景プロパティとして適用されたdivがあるとします。私は今、（小さいサイズの）黒のPNGをオーバーレイし、PNGをオーバーレイの背景ブレンドモードに設定したいと考えています。残念ながら、これを達成する方法がわかりません。

次のような PNG 画像を使用してグラデーションを Div の CSS にレンダリングすると、background-blend-modeが機能することがわかっています。

background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;

ただし、これにより、次のように、グラデーションが実際の PNG と同じくらい小さくなり、これは望ましい効果ではありません。 ここに画像の説明を入力

私が達成したいのは、純粋なCSSでこれです（可能であれば）：

CSS でレンダリングされたグラデーションを使用して div の上に PNG をオーバーレイする

ここに、私がやろうとしていることを説明するコードペンがあります: http://codepen.io/anon/pen/zxOXGP 黒いアイコンに注目してください。これを重ねたい。

4

2 に答える 2

1

グラデーションサンド

材料

  • は:beforeで下部の z レイヤーを形成しz-index: 1、完全に不透明です

  • .contentdiv は、塗りつぶし、中央の z レイヤーを形成しますz-index: 2。position: relativez-index を取得する必要があります。

  • で一番:after上の z レイヤーを形成しz-index: 3、ランチ アイテムを完成させます。半透明です。

これはおいしい結果です：

サンドイッチの結果

完全な例

簡単にするために、標準の CSS3 グラデーション以外はすべて削除しました。対応ブラウザでご覧ください。

.gradient {
  position: relative;
  height: 200px;
  padding: 20px;
}
.gradient:before,
.gradient:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  display: block;  
  background-size: 100%;
  background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
  opacity: 0.5;
}
.gradient:before {
  opacity: 1;
  z-index: 1;
}
.gradient:after {
  z-index: 3;
}
.overlayed_image {
  position: relative;
  width: 64px;
  height: 64px;
  display: block;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}

.content {
  position: relative;
  z-index: 2;
}
<div class="gradient">
  <div class="content">
    You can see me! 
    <div class="overlayed_image"></div>
  </div>
</div>

于 2014-11-11T15:32:52.087 に答える