用 CSS 有可能达到这种透明度和饱和度吗？

Question

我正在尝试使用 CSS 实现与我在 Photoshop / Avocode 中相同的视图。但无论我如何重叠背景以及我设置的不透明度级别 - 我都无法达到相同级别的透明度和饱和度。

CSS可以吗？

.parent {
height:300px;
width: 650px;
display:flex;
}

.child {
position:relative;
flex:1;
background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
background-position: center;
width:50%;
height:100%;
}
.child::after {
content:'';
position:absolute;
width: 100%;
height: 100%;
/*background-color: rgba(102, 207, 235,.7);*/
background-color: rgba(34,186,226, .7);

}
.child1 {
flex:1;
background-image: url(https://i.imgur.com/t2IIhj1.png);
background-position: center;
width:50%;
height:100%;
}

<div class="parent">
<div class="child"></div>
<div class="child1"></div>
</div>

Answer 1

不确定这是否符合您的需求，但可以作为一种实现方式。

.parent {
  position: relative;
  height: 300px;
  width: 200px;
  background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
  background-position: center;
}

.parent::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(102, 207, 235);
  opacity: .7;
}

<div class="parent" />

Answer 2

你可以用线性渐变来做到这一点，把它放在背景图像中的图像前面。这是解决方案：

.parent {
    height:300px;
    width: 200px;
    }
    
    .child {
    background-image: linear-gradient(rgba(102, 207, 235,0.5), rgba(102, 207, 235,0.5)), url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); 
    opacity:1;
    /*
    filter: saturate(2);
    */
    background-position: center;
    width:100%;
    height:100%;
    }

<div class="parent">
<div class="child"></div>
</div>

Answer 3

添加一个mix-blend-mode可能会帮助你更接近：

.parent {
  height: 300px;
  width: 650px;
  display: flex;
}

.child {
  position: relative;
  flex: 1;
  background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
  background-position: center;
  width: 50%;
  height: 100%;
}

.child::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 186, 226, .7);
    mix-blend-mode: hard-light;
}

.child1 {
  flex: 1;
  background-image: url(https://i.imgur.com/t2IIhj1.png);
  background-position: center;
  width: 50%;
  height: 100%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child1"></div>
</div>

用 CSS 有可能达到这种透明度和饱和度吗？

Is it possible to achieve this level of transparency and saturation with CSS?

css

background

background-image

background-color

photoshop