Canva 双色调效果

Question

我四处寻找这个问题，但似乎找不到答案。

我正在尝试复制我在 canva 上创建的双色调图像，但是是通过 CSS。我附上了两张图片，第一张是我在canva上创建的，第二张是我通过CSS可以得到的最接近的。如果有人有任何建议，将不胜感激。

duotone canva 1

duotone canva 2

.color-hover-wrapper {
    block-size: 186.562px;
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    bottom: 0px;
    box-sizing: border-box;
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    height: 186.562px;
    inline-size: 270.75px;
    inset-block-end: 0px;
    inset-block-start: 0px;
    inset-inline-end: 0px;
    inset-inline-start: 0px;
    justify-content: center;
    left: 0px;
    margin-block-end: 10px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    object-fit: cover;
    perspective-origin: 135.375px 93.2812px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    transform-origin: 135.375px 93.2812px;
    width: 270.75px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    margin: 0px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}

.color-hover-wrapper:after {
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

.color-hover-wrapper:before {
    block-size: 186.562px;
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    bottom: 0px;
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    content: '""';
    display: block;
    height: 186.562px;
    inline-size: 270.75px;
    inset-block-end: 0px;
    inset-block-start: 0px;
    inset-inline-end: 0px;
    inset-inline-start: 0px;
    left: 0px;
    mix-blend-mode: lighten;
    perspective-origin: 135.375px 93.2812px;
    position: absolute;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    transform-origin: 135.375px 93.2812px;
    width: 270.75px;
    z-index: 1;
    background: rgb(86, 179, 148) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

.image-74 {
    block-size: 186.562px;
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    bottom: 0px;
    box-sizing: border-box;
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    display: block;
    filter: brightness(1.3) grayscale(1);
    height: 186.562px;
    inline-size: 270.75px;
    inset-block-end: 0px;
    inset-block-start: 0px;
    inset-inline-end: 0px;
    inset-inline-start: 0px;
    left: 0px;
    mix-blend-mode: multiply;
    object-fit: cover;
    perspective-origin: 135.375px 93.2812px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    transform-origin: 135.375px 93.2812px;
    vertical-align: middle;
    width: 270.75px;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

.image-74:after {
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}/*#IMG_2:after*/

.image-74:before {
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

<div class="partner-images-middle color-hover-wrapper">
    <img src="https://uploads-ssl.webflow.com/614dcb4bf12577162ad79f80/61e7e02d6695217fc1c8e82d_Screenshot%202022-01-19%20at%2010.55.37.png" loading="lazy"   sizes="(max-width: 1279px) 28vw, 342px" class="image-74">
</div>

Answer 1

我对所有 CSS 感到相当困惑，因为其中大部分似乎与尝试获取单调图像无关，所以这里是一个片段，除了设置灰度、upping 之外，所有内容都被剥离了对比度略微混合混合模式。显然，您会想要使用这些来获得所需的效果。

.color-hover-wrapper {
  width: 50vw;
  background-color: rgb(86, 179, 148);
  display: inline-block;
}

.image-74 {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(1) contrast(1.5);
  filter: grayscale(1) contrast(1.5);
  width: 50%;
  rheight: auto;
  width: 100%;
}

<div class="partner-images-middle color-hover-wrapper">
  <img src="https://uploads-ssl.webflow.com/614dcb4bf12577162ad79f80/61e7e02d6695217fc1c8e82d_Screenshot%202022-01-19%20at%2010.55.37.png" loading="lazy" sizes="(max-width: 1279px) 28vw, 342px" class="image-74">
</div>

注意：我没有深入研究前后伪元素的作用，但至少在我当前的浏览器（Edge）中它们没有被应用到 img 上，总的来说你不能将伪元素放在替换元素上。最好使用您的浏览器开发工具检查 CSS 正在应用什么。

Canva 双色调效果

Canva Duotone Effect

html

css

css-selectors

svg-filters

css-filters