css - 是否有可能使用 CSS 实现这种级别的透明度和饱和度?
问题描述
我正在尝试使用 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>
解决方案
添加 amix-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>
推荐阅读
- c# - 对并发包的 linq 查询偶尔会出现性能下降
- ios - BSP Dungeon Generator 给出无法修复的错误
- batch-file - 如何使用批处理脚本替换文件中的两行文本
- regex - 如何将已识别的正则表达式保存在找到模式的同一 txt 文件中的列中?
- javascript - 按下退格按钮时选择自动完成触发回发
- asp.net-web-api - Twitter 直接消息事件 API 1.1
- c++ - 在Qt中测试是QJsonObject还是QJsonArray
- powershell - 连接到安全的 Azure Service Fabric 群集时出现问题
- java - 在 Java 跨平台桌面应用程序上接收推送通知
- r - 从另一个包扩展 S4 类:reconcilePropertiesAndPrototype 错误