主页 / 问题 / 785986
Accepted
Alexey Giryayev
Asked:2020-02-16 19:17:27 +0000 UTC2020-02-16 19:17:27 +0000 UTC

乘以 img（灰色背景上的白色背景图像叠加）

  • 772

因此，通常需要在灰色背景上叠加图像，例如产品项目。同时，我们有一个白色的背景，这往往不适合页面的设计。用于理解问题的图片：

在此处输入图像描述

有什么方法可以<img>类比在灰色背景上叠加background-blend-mode: multiply？

一段带有外观的 HTML，因此不会尝试简单地复制上图中的内容：

body {
margin: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
}
img {
max-width: 240px;
margin: 60px;
}
<img src="https://isstatic.askoverflow.dev/iunPY.jpg" />

css

4 个回答

  1. 是的，这是一个属性mix-blend-mode: multiply。

    figure {
  margin: 0;
  padding: 0;
  position: relative;
}

figure img {
  mix-blend-mode: multiply;
  display: block;
}

figure:before {
  position: absolute;
  content: ' ';
  right: 0;
  width: 50%;
  height: 100%;
  background: #CCC;
  z-index: -1;
}
    <figure>
  <img src="https://media.istockphoto.com/photos/handsome-young-man-on-white-background-picture-id523478288?k=6&m=523478288&s=612x612&w=0&h=4JptiegzwJp1nA1ItdZSogOmqVqC02ZCFTCI32VrDDY=" />
</figure>

    • 3
  2. Best Answer

    目前，解决问题的最简单和最平庸的方法是用透明背景覆盖图像：

    body {
  margin: 0;
  padding: 0;
  background: #f6f6f6;
  text-align: center;
}

img {
  max-width: 240px;
  margin: 60px;
}

div {
  position: absolute;
  width: 120px;
  height: 240px;
  background: rgba(30, 30, 30, .04);
  left: 50%;
  top: 60px;
}
    <img src="https://isstatic.askoverflow.dev/iunPY.jpg" />
<div></div>

    在这种情况下，在使用这些值之后，我完全达到了预期的结果，没有损失对比度和复杂的“拐杖”。应用范围可以非常多样化。如果没有人想出更好的东西，我很乐意接受它作为正确答案。

    • 2

  3. 你可以这样做：

    .image {
  position: relative;
  display: inline-block;
}

.image> div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  background: gray; /*Задать фон для png, отличный от основного*/
}

.image-slider img {
  display: block;
}
    <div class="image">
  <div>
    <img src="https://vignette.wikia.nocookie.net/chelovechestorona/images/b/b9/Bill_cipher_cat_by_ink_n_heart-d7mx1b5.png/revision/latest/scale-to-width-down/640?cb=20141006131434&path-prefix=ru" alt="" />
  </div>
  <img src="https://vignette.wikia.nocookie.net/bakugan/images/2/2e/Aquos_Olifus.png/revision/latest?cb=20110223133315" alt="" />
</div>

    • 0

  4. 使用 css 您不会更改光栅图像的各个部分（请参见白色背景），在您的情况下仅使用png.

    .card{
  width:200px;
  height:200px;
  background:
    url(https://www.be-in.ru/media/beingallery/gallary/things/2014/03/12/DSC_6803.png.590x700_q95.png) no-repeat center/100px auto,
    linear-gradient(90deg,white 50%,gray 50%);
  border:1px solid;
  position:relative;
}
.card:before{
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:calc(50% - 1px);
  height:100%;
  border-right:2px solid rgba(0,0,0,.3);
}
    <div class="card"></div>

    • 0

相关问题