How to realize the special picture display effect with the new attribute of CSS
This article mainly introduces the new properties of CSS how to achieve special picture display effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
1 Overview 1.1 foreword
Many special picture display effects can be achieved by using one or more image-related CSS attributes (background-blend-mode, mix-blend-mode, or filter). A total of 20 kinds of picture display effects are listed.
2 effect list 2.1 example of pencil drawing effect
SCSS code specially built learning Q-q-u-n: 784783012, sharing learning methods and small details that require attention, and constantly updating the latest tutorials and learning techniques (from zero to front-end project tutorials, learning tools, full-stack development learning routes and planning). Pencil-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center Supports (filter: invert (1)) and (background-blend-mode: difference) {background-image: $url, $url; background-blend-mode: difference; background-position: calc (50-1px) calc (50-1px), calc (50% + 1px) calc (50% + 1px); filter: brightness (2) invert (1) grayscale (1) Box-shadow: inset 000 1px black;}} 2.2 example of watercolor effect
SCSS code. Watercolor-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: blur (2px)) and (mix-blend-mode: multiply) {position: relative; overflow: hidden; &: before, &: after {display: block; content: "; position: absolute Top: 0; left: 0; right: 0; bottom: 0; background-size: cover;} &: before {background-image: $url, $url; background-blend-mode: difference Background-position: calc (50%-1px) calc (50%-1px), calc (50% + 1px) calc (50% + 1px); filter: brightness (2) invert (1) grayscale (1); box-shadow: inset 000 1px black;} &: after {background-image: $url Background-position: center; mix-blend-mode: multiply; filter: brightness (1.3) blur (2px) contrast (2);} 2.3 example of relief effect
SCSS code. Emboss-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: invert (1)) and (background-blend-mode: difference, screen) {background-image: $url, $url, $url; background-blend-mode: difference, screen Background-position: calc (50%-1px) calc (50%-1px), calc (50% + 1px) calc (50% + 1px), center; filter: brightness (2) invert (1) grayscale (1);}} 2.4 color lead effect example
SCSS code .coloring-pencil-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: invert (1)) and (mix-blend-mode: color) {position: relative; &: before, &: after {display: block; content: "; position: absolute Top: 0; left: 0; right: 0; bottom: 0; background-size: cover; box-shadow: inset 000 1px black;} &: before {background-image: $url, $url; background-blend-mode: difference Background-position: calc (50%-1px) calc (50%-1px), calc (50% + 1px) calc (50% + 1px); filter: brightness (2) invert (1) grayscale (1); &: after {background: inherit; mix-blend-mode: color 2.5 example of blackboard effect
SCSS code. Chalkboard-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: grayscale (1)) and (background-blend-mode: difference) {background-image: $url, $url; background-blend-mode: difference Background-position: calc (50%-1px) calc (50%-1px), calc (50% + 1px) calc (50% + 1px); filter: brightness (1.5) grayscale (1);}} 2.6 color blackboard effect example
SCSS code .coloring-chalkboard-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: brightness (2)) and (background-blend-mode: color, difference) {background-image: $url, $url, $url; background-size: cover Background-position: calc (50%-1px) calc (50%-1px), calc (50% + 1px) calc (50% + 1px), center; background-blend-mode: color, difference; filter: brightness (2);}} 2.7 spray gun effect example
SCSS code. Airbrush-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: blur (5px) contrast (5)) and (mix-blend-mode: multiply) {position: relative; overflow: hidden; &: after {display: block; content:'; position: absolute Top: 0; left: 0; right: 0; bottom: 0; background: inherit; filter: brightness (1.5) saturate (100) blur (5px) contrast (5); mix-blend-mode: multiply;}} 2.8. example of gorgeous effect
SCSS code. Hallucination-effect {$url: url (photo.jpg); $offset: 5px; background-image: $url; background-size: cover; background-position: center; @ supports (mix-blend-mode: multiply) {position: relative; overflow: hidden; background-color: magenta; background-blend-mode: screen; &: before, &: after {display: block; content: "; position: absolute; top: 0 Left: 0; right: 0; bottom: 0; background: inherit; mix-blend-mode: multiply; transform: scale;} &: before {background-color: yellow; background-blend-mode: screen; transform-origin: top left;} &: after {background-color: cyan; background-blend-mode: screen; transform-origin: bottom right An example of the effect of 2.9 velvet cloth
SCSS code specially built learning Q-q-u-n: 784783012, sharing learning methods and small details that require attention, and constantly updating the latest tutorials and learning techniques (from zero to front-end project tutorials, learning tools, full-stack development learning routes and planning). Flannel-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center @ supports (background-blend-mode: overlay) {background-image: $url, $url, $url; background-position: center; background-size: 100%, 1000000% 100%, 100% 1000000%; background-blend-mode: overlay;} 2.10 level low ink effect example
SCSS code .low-ink-x-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (background-blend-mode: screen, overlay) {background-image: $url, $url, $url; background-size: 100% 100%, 10000% 100%; background-blend-mode: screen, overlay;}} 2.11 Vertical low Ink effect example
SCSS code .low-ink-y-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (background-blend-mode: screen, overlay) {background-image: $url, $url, $url; background-size: 100% 100%, 100% 1000%; background-blend-mode: screen, overlay;}} 2.12 collage effect example
SCSS code. Collage-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (background-blend-mode: overlay) {background-image: $url, $url; background-size: 200%, 80%, 60%, 50%, 40%, 100%; background-position: 50%, 80%, 30%, 0 Example of background-blend-mode: overlay; background-repeat: no-repeat;} 2.13 mosaic effect
SCSS code. Mosaic-effect {$url: url (photo.jpg); background-image: $url, $url; background-size: cover, 5%; background-position: center; background-blend-mode: overlay;} 2.14 example of picture frame effect
SCSS code. Photo-border-effect {$url: url (photo.jpg); background-image: $url, $url; background-position: center; background-size: 60%, 20%; background-repeat: no-repeat, repeat;} 2.15Infrared effect example
SCSS code. Infrared-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; filter: hue-rotate (180deg) saturate (2);} 2.16 Night Vision effect example
SCSS code .night-vision-effect {$url: url (photo.jpg); $line-width: 5px; background-image: $url, radial-gradient (# 0F0, # 000), repeating-linear-gradient (transparent 0, rgba) $line-width/2, transparent $line-width); background-size: cover; background-position: center; background-blend-mode: overlay } 2.17 example of Warhol effect
SCSS code. Warhol-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center @ supports (background-blend-mode: color) {background-image: linear-gradient (# 14EBFF 0, # 14EBFF 50%, # FFFF70 50%, # FFFF70 100%), linear-gradient (# FF85DA 0, # FF85DA 50%, # AAA 50%, # AAA 100%), $url Background-size: 50% 100%, 50% 100%, 50% 50%; background-position: top left, top right; background-repeat: no-repeat, no-repeat, repeat; background-blend-mode: color;} 2.18 example of color correction effect
SCSS code .selective-color-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (filter: brightness (3)) and (mix-blend-mode: color) {position: relative; &: before, &: after {display: block; content: "; position: absolute; top: 0; left: 0; right: 0; bottom: 0 Background: inherit; background-color: red; background-blend-mode: screen; mix-blend-mode: color; filter: brightness (3);} 2.19 horizontal mirroring effect example
SCSS code specially built learning Q-q-u-n: 784783012, sharing learning methods and small details that require attention, and constantly updating the latest tutorials and learning techniques (from zero to front-end project tutorials, learning tools, full-stack development learning routes and planning). Mirror-x-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center Supports (transform: scaleX (- 1)) {position: relative; &: before, &: after {display: block; content: "; position: absolute; top: 0; bottom: 0; background: inherit;} &: before {left: 0; right: 50% Transform: scaleX (- 1);} &: after {left: 50%; right: 0;}} 2.20 example of vertical mirroring effect
SCSS code .mirror-y-effect {$url: url (photo.jpg); background-image: $url; background-size: cover; background-position: center; @ supports (transform: scaleY (- 1)) {position: relative; &: before, &: after {display: block; content: "; position: absolute; left: 0 Right: 0; background: inherit;} &: before {top: 0; bottom: 50%; transform: scaleY (- 1);} &: after {top: 50%; bottom: 0 } Thank you for reading this article carefully. I hope the article "how to achieve special picture display effects with the new properties of CSS" shared by the editor will be helpful to you. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!
