Fake See-Through Backgrounds with CSS

Here’s a little bit of CSS to create a cool “see-through” effect, which is particularly fun when using fixed-position background images.

Try scrolling me!

Considerations

This method utilizes the :after pseudo-element, which doesn’t work so well on inputs, but if you want to apply the same effect to form elements you can just create a lighter/translucent version of the same background image and apply it to the <input>‘s. Anybody have a way to do this without creating a second image? We’d love to hear about it.

Leave a Reply

Your email address will not be published. Required fields are marked *