All geek questions in one place

Transparent (opaque) image from top 0% to the bottom 100% in CSS

Is it possible? Just in CSS, like this picture, I mean, if I put on the background image of the <div> , I need it to be transparent from top to bottom.

I want to create something similar to the image below:

enter image description here

+6
source share
6 answers

According to other answers, it's impossible to make an image transparent from top to bottom in CSS.

BUT

If you have a solid background color (or similar), you can simulate this transparency with a CSS3 insert in the form of shadows.
For an image of a white overlay and a translucent black rectangle. In the following demo, I used pseudo-elements to minimize HTML markup.

Demo

Output:

Simulated transparency over image with CSS3 inset box shadows

HTML:

 <div class="image"></div>

CSS:

 .image{ position:relative; height:500px; width:500px; margin:50px auto; background: url('http://lorempixel.com/output/people-qc-640-480-8.jpg'); background-size:cover; -moz-box-shadow: inset 0px 850px 500px -500px #fff; -webkit-box-shadow: inset 0px 850px 500px -500px #fff; -o-box-shadow: inset 0px 850px 500px -500px #fff; box-shadow: inset 0px 850px 500px -500px #fff; } .image:before,.image:after{ content:''; position:absolute; left:5%; opacity:0.5; } .image:before{ top:0; width:20%; height:100%; -moz-box-shadow: inset 0px 850px 500px -500px #000; -webkit-box-shadow: inset 0px 850px 500px -500px #000; -o-box-shadow: inset 0px 850px 500px -500px #000; box-shadow: inset 0px 850px 500px -500px #000; } .image:after{ width:20%; height:10%; top:100%; background:#000; }
+6
source

Actually, you can do it in webkit! Mozilla admits SVG masks, but I will not delve into this. Zero support in IE.

Demo: JSFiddle

HTML:

 <div> <img src="http:/www.fillmurray.com/300/200"/> </div>

CSS

 div { -webkit-mask-size: 300px 200px; -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,1))); }

Link: http://caniuse.com/css-masks

+3
source

I made a violin for you. You should use gradients with rgba. This is not supported in all browsers, so you may want to manipulate them. However, this is the only way to do this in CSS.

Here is the code:

HTML:

 <html> <head> </head> <body> <img src="http://upload.wikimedia.org/wikipedia/meta/6/6d/Wikipedia_wordmark_1x.png" /> <div class="whatever"></div> </body> </html>

CSS

 body { margin:0px; } img { height:30px; position:relative; } .whatever { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #ff00ff), color-stop(1, rgba(0,0,0,0)) ); background-image: -o-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -moz-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -webkit-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: linear-gradient(to bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); height:30px; position:relative; width:100px; top:-34px; }
+2
source

You should use the CSS background property with a linear-gradient value set by itself for your request.

CSS

 background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(0,0,0,0) 100%);

Note this jsFiddle Demo Example

+1
source

I don't think you can reproduce this for sure (especially if the top of img is actually transparent). If you just need the “transparency” from white to image ... it's a little easier ..

JSfiddle Demo

HTML

 <div class="wrapper"> <div class="imgwrap"> <img src="http://lorempixel.com/output/nature-qc-200-200-2.jpg" alt=""/> </div> </div>

CSS

 body { background-color: #bada55; } .wrapper { height:240px; display: inline-block; margin: 25px; border:1px solid grey; background-color: white; padding:8px; } .imgwrap { display: inline-block; position: relative; } .imgwrap:after { position: absolute; content:""; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%); z-index:1; }
+1
source

Overlay a gradient div on an image with an absolute position and z-index:

CSS

 section{ margin:0px 0px; padding:0px 0px; width: 300px; display:block; height: auto; position:relative; } section #overlay{ position:absolute; top:0; left:0; right:0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */ width:100%; height:100%; z-index:2; } section #imgContainer{ width: 300px; height: auto; margin: 0px 0px; padding: 0px 0px; overflow: hidden; display: inline-block; } section #imgContainer img{ width: 300px; padding: 0; margin: 0; display: block; }

HTML

  <section> <div id="overlay"> </div> <div id="imgContainer"> <img src="" /> </div> </section>
0
source

Source: https://habr.com/ru/post/969633/

More articles:


All Articles