Fade image to transparent like a gradient
If you want this:
You can do this:
<html> <style type='text/css'> div, img { position:absolute; top:0; left:0; width:250px; height:250px; } img { -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); } </style> <body> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div> <img src='https://i.imgur.com/sLa5gg2.jpg' /> </body></html>
How to fade a background image to transparent, in a gradient fashion?
This is not possible with CSS as it stands as background images cannot be affected by opacity
.
However, you could overlay the bg-image background with a background gradient with opacity but it would have to end in a definite color, in your case white
.
body { min-height: 100vh; background-image: linear-gradient(transparent, white 75%), url(http://www.fillmurray.com/460/300);}
CSS - Transparency Gradient on an Image
My solution to my problem is to simply state that this is not possible with the current technology. An alternative option would be to use a simple transparency gradient. Until A better solution arrises this is what I will end up doing.
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
Transparent Background Image with a Gradient
Keep in mind that a CSS gradient is actually an image value, not a color value as some might expect. Therefore, it corresponds to background-image
specifically, and not background-color
, or the entire background
shorthand.
Essentially, what you're really trying to do is layering two background images: a bitmap image over a gradient. To do this, you specify both of them in the same declaration, separating them using a comma. Specify the image first, followed by the gradient. If you specify a background color, that color will always be painted underneath the bottom-most image, which means a gradient will cover it just fine, and it will work even in the case of a fallback.
Because you're including vendor prefixes, you will need to do this once for every prefix, once for prefixless, and once for fallback (without the gradient). To avoid having to repeat the other values, use the longhand properties1 instead of the background
shorthand:
#mydiv .isawesome {
background-color: #B1B8BD;
background-position: 0 0;
background-repeat: no-repeat;
/* Fallback */
background-image: url('../images/sidebar_angle.png');
/* CSS gradients */
background-image: url('../images/sidebar_angle.png'),
-moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background-image: url('../images/sidebar_angle.png'),
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
background-image: url('../images/sidebar_angle.png'),
linear-gradient(to bottom, #ADB2B6, #ABAEB3);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}
Unfortunately this doesn't work correctly in IE as it uses filter
for the gradient, which it always paints over the background.
To work around IE's issue you can place the filter
and the background image in separate elements. That would obviate the power of CSS3 multiple backgrounds, though, since you can just do layering for all browsers, but that's a trade-off you'll have to make. If you don't need to support versions of IE that don't implement standardized CSS gradients, you have nothing to worry about.
1 Technically, the background-position
and background-repeat
declarations apply to both layers here because the gaps are filled in by repeating the values instead of clamped, but since background-position
is its initial value and background-repeat
doesn't matter for a gradient covering the entire element, it doesn't matter too much. The details of how layered background declarations are handled can be found here.
How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS
You can consider mask
to do this. You can specify the same properties as background thus you can easily define your gradient.
.box { width: 1000px; height: 1000px; position:relative; z-index:0;}.box:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:url(https://picsum.photos/id/42/10/10); -webkit-mask-image:linear-gradient(to top, transparent, #fff, transparent); mask-image:linear-gradient(to top, transparent, #fff, transparent);}
<div class="box">hello</div>
Apply linear transparent gradient to a portion of image with transparent background in python
Here is how to do that in ImageMagick 7 if you have an existing alpha channel in the input or not. It is slightly different. You basically extract the alpha channel from the input and multiply it with the one containing the gradient. Then put that new one into the original image replacing the existing alpha channel.
Input:
magick lena_circle.png \
-alpha set \
-set option:wd "%w" \
-set option:ht "%h" \
-set option:ht2 "%[fx:round(0.25*ht)]" \
-set option:ht3 "%[fx:ht-ht2]" \
\( -size "%[wd]x%[ht3]" xc:white \) \
\( -size "%[wd]x%[ht2]" gradient:white-black \) \
\( -clone 1,2 -append \) \
-delete 1,2 \
\( -clone 0 -alpha extract \) \
\( -clone 1,2 -compose multiply -composite \) \
-delete 1,2 \
-alpha off -compose copy_opacity -composite \
lena_circle_fade3.png
Resulting Image:
Transparent gradient for top and bottom of background image css
You can have multiple stops in a gradient, so if you wanted the top 10% to fade to transparent and the bottom 10% to fade back, you could do something like this:
background-image: linear-gradient(
to bottom,
rgba(64, 64, 64, 1) 0%,
rgba(64, 64, 64, 0) 10%,
rgba(64, 64, 64, 0) 90%,
rgba(64, 64, 64, 1) 100%
);
Demo with <img>
tag: http://jsfiddle.net/sh6Hh/ or without the extra <div>
: http://jsfiddle.net/sh6Hh/262/
Demo with css background picture: http://jsfiddle.net/sh6Hh/1/
Is it possible to use css to make a background image fade or gradient the bottom portion to transparent so that a background color shows?
It is possible - in CSS3 you can set multiple values for background
body { background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */}
How to fade a background-image to transparency?
I can only think of one pure CSS solution and it is simply insane.
Let's say your image has a width of 100px
. You'll have to create a div
that's 100px
wide and give it 100
children that are each 1px
wide, that each have the same background
(positioned accordingly) and that each have an opacity
from 0
(the first child) to .99
(the last child).
Personally, I think it's crazy and I'd never use this method.
Rory O'Kane came with a nice and clean solution and I also have another idea which involves JavaScript.
Basically, the idea is that you use a canvas
element (support), draw your image on it, loop through its pixels and adjust the alpha for each.
demo
(scroll down to see the result)
Relevant HTML:
<div class='parent'>
<canvas id='c' width='575' height='431'></canvas>
</div>
Relevant CSS (setting the background image on the parent)
.parent {
background: url(parent-background.jpg);
}
JavaScript:
window.onload = function() {
var c = document.getElementById('c'),
ctxt = c.getContext('2d'),
img = new Image();
img.onload = function() {
ctxt.drawImage(img, 0, 0);
var imageData = ctxt.getImageData(0, 0, 575, 431);
for(var i = 0, n = imageData.data.length; i < n; i += 4) {
imageData.data[i + 3] = 255*((i/4)%575)/575;
}
ctxt.putImageData(imageData, 0, 0);
};
/* images drawn onto the canvas must be hosted on the same web server
with the same domain as the code executing it */
/* or they can be encoded like in the demo */
img.src = 'image-drawn-on-canvas.jpg';
};
Related Topics
Webkit Backface Visibility Not Working
Why Can't I Save CSS Changes in Firebug
Why "Overflow: Hidden" Clears a Float
Is This Possible to Create 2-Axis 4 Color Gradient in CSS (Bilinear Gradient)
Css: Background Image on Background Color
Add Ellipses to Overflowing Text in Svg
Is There Such a Thing as an "All Inclusive Sibling" CSS Selector
How to Create Multiple Borders Around Existing Border of Circle
IE6/IE7 CSS Border on Select Element
Replace Input Type=File by an Image
How to Align Nav Items to the Right in Bootstrap 5
How to Render Multiple Columns with Markdown in Github Readme
Is There a 'Box-Shadow-Color' Property