[CSS] Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
CSS to and create use mode Elements Style
2023-09-14 09:00:47 时间
In this lesson, we use CSS pseudo-elements and the mix-blend-mode
property to create a duotone effect for an image.
We wrap the image in a container element and overlay it with pseudo-elements that have different background colors. Then using mix-blend-mode
, we blend those overlays through the stacking context to create a duotone style effect.
<div class="doutone"> <img src="" alt="" /> </div>
.duotone { position: relative; } .duotone:after, .duotone:before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .duotone:after { background-color: hsl(280, 80%, 50%); mix-blend-mode: lighter; } .duotone:before { background-color: hsl(90, 80%, 50%); mix-blend-mode: darken; }
相关文章
- css 垂直居中方法汇总
- css 媒体查询(Chrome 104)
- [CSS] Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
- [CSS 3] Add a Cutout Notch to an HTML Element with a CSS Polygon Clip-Path
- [CSS3] Using CSS Combinators to Identify Siblings and Descendants in CSS
- [CSS] Using single grid-template-area and justify-self to select arrow down icon in select
- [CSS3] Use CSS Variables to Maintain the Aspect Ratio for an Element
- [CSS 3 + JS] Create a Function to Convert JS Numbers into CSS Hex Colors
- [Nuxt] Add CSS Libraries to Nuxt
- [TypeStyle] Add type safety to CSS using TypeStyle
- [CSS] Use CSS Counters to Create Pure CSS Dynamic Lists
- 前端必看!css中常用单位及区别
- css案例16——ul无序列表(无li时无样式,有li后出现样式)
- 在html里 怎么在字的中间加一条横线表示这些字被划掉了,用css。