5

Photoshop では、白い背景の JPG 画像を青色のドキュメントにインポートする場合、画像を「乗算」モードに設定することで画像backgroundの白を消すことができます。background

CSSだけでまったく同じことができますか？

4

3 に答える 3

10

CSSで使用できますmix-blend-mode

CSS プロパティは、要素のmix-blend-modeコンテンツが、その下にある要素のコンテンツおよび要素の背景とどのように調和するかを記述します。

スニペット

body {
  margin: 0;
  background: url(http://lorempixel.com/1200/1200) no-repeat 0 0 / cover
}
img {
  mix-blend-mode: multiply;
}
<img src="//placehold.it/300" />

または、使用できますbackground-blend-mode

CSS プロパティはbackground-blend-mode、要素の背景画像が互いにどのようにブレンドされるべきか、および要素の背景色をどのようにブレンドするかを記述します。

スニペット

div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: multiply;
}
<div></div>

IE は両方をサポートしていません。こことここのサポートを参照してください。

于 2016-03-11T15:23:05.627 に答える
1

background-blend-modeを使用できますが、Chrome と Firefox でのみ使用できます。

CSS Tricks の記事によると、コードは次のようになります。

.blended {
    background-image: url(face.jpg);
    background-color: red;
    background-blend-mode: multiply;
}
于 2016-03-11T15:33:41.953 に答える
1

はい...ちょっと...

質問は少し漠然としていますが、画像の白い「部分」を削除して、その背後にある要素の背景色を表示することはできますか?

はい、できます...でmix-blend-mode。

body {
  background: blue;
  text-align: center;
}
div {
  mix-blend-mode: multiply;
  display: inline-block;
  margin: 1em auto;
}
<div>
  <img src="http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg" alt="" />
</div>

注: これは、画像を保持している div の背後にある要素の背景のみを示しています。ラッピング div に背景色を追加しても何も起こりません。

そのためには、さらに別のラッパーが必要になる場合があります。

body {
  background: blue;
  text-align: center;
}
div.parent {
  display: inline-block;
  margin: 1em auto;
  background: red;
}
div.child {
  mix-blend-mode: multiply;
}
<div class="parent">

  <div class="child">
    <img src="http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg" alt="" />
  </div>

</div>

または、おそらく疑似要素の背景として:

body {
  background: blue;
  text-align: center;
}
.child {
  width: 200px;
  height: 200px;
  background: red;
  margin: 1em auto;
  position: relative;
  background-color: red;
}
div.child::before {
  mix-blend-mode: multiply;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg);
  background-size: cover;
  z-index: 0;
}
<div class="child"></div>

于 2016-03-11T15:42:52.330 に答える