Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.