Create semi-transparent CSS background images by crossfading them with a transparent GIF

Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images.
.el {
background-image: -webkit-cross-fade(
url(image.jpg),
url(data…


This content originally appeared on Bram.us and was authored by Bramus!

Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images.

.el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), /* transparent GIF, base64 encoded */
    50%
);

Clever! WebKit/Chromium based browsers only though (i.e. no Firefox)

Maybe there kinda is background-opacity? →


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-12-21T00:15:30+00:00) Create semi-transparent CSS background images by crossfading them with a transparent GIF. Retrieved from https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/

MLA
" » Create semi-transparent CSS background images by crossfading them with a transparent GIF." Bramus! | Sciencx - Tuesday December 21, 2021, https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/
HARVARD
Bramus! | Sciencx Tuesday December 21, 2021 » Create semi-transparent CSS background images by crossfading them with a transparent GIF., viewed ,<https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/>
VANCOUVER
Bramus! | Sciencx - » Create semi-transparent CSS background images by crossfading them with a transparent GIF. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/
CHICAGO
" » Create semi-transparent CSS background images by crossfading them with a transparent GIF." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/
IEEE
" » Create semi-transparent CSS background images by crossfading them with a transparent GIF." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/. [Accessed: ]
rf:citation
» Create semi-transparent CSS background images by crossfading them with a transparent GIF | Bramus! | Sciencx | https://www.scien.cx/2021/12/21/create-semi-transparent-css-background-images-by-crossfading-them-with-a-transparent-gif/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts