Was working towards a repeated background that has a spotlight and decided to use blend modes to achieve this.
However, it appears as if blend modes did not apply in Chrome.
Replicated here: http://jsfiddle.net/pptn4f5v/7/
body {
background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), url("https://dl.dropboxusercontent.com/u/10686242/background-blend%20-%20Copy.png") #030303;
background-repeat: repeat, no-repeat;
background-blend-mode: multiply, normal;
background-size: auto, contain;
}
Is this a limitation of Chrome? This works perfect in Firefox.
Probably it is a bug in Chrome
However, you can get this effect more easily, and it will work ok in both browsers
Use only 2 backgrounds, and create the spot with a gradient
.test {
background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"),
radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);
background-blend-mode: darken;
height: 400px;
}
<div class="test"></div>
Related
I'm trying to use the gradient property to create a background and for some reason, it renders gradients wrong in firefox but perfectly in chrome based browsers. I've tried using -moz- and it doesn't help. For some reason, it creates a bunch of distinct lines and it looks really bad when I try to make it bigger.
body {
height: 100vh;
width: 100vh;
background-image: radial-gradient(hwb(0 35% 65%) -100%, hwb(0 13% 87%));
background-size: 200% 200%;
background-position: bottom;
}
Check out these pictures for reference
Firefox
Chrome
I'm porting a UI-based game from Unity to Cordova. In Unity, I was tinting predominately white images with various colors to reuse assets. The rough CSS equivalent seems to be using the [mostly standard] background-blend-mode property set to multiply and have the image in the background with the desired tint color as the bg color.
.tinted {
background-image: url('theimg.png');
background-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
The problem is that it doesn't preserve the opacity of the image, namely the transparent parts become the tint color. The spec says something about blending from the top down so I thought it might relate to blending with the bg color, but it doesn't work if I layer a solid color (as a gradient) on top of the image either.
.tinted2 {
background-image: url('theimg.png'), linear-gradient(to bottom, #0f0, #0f0);
background-size: 100% 100%;
background-blend-mode: multiply;
}
Reversing the order of the background images or changing the blend mode to normal, multiply or multiply, normal doesn't work either. Any suggestions on how to do this correctly using CSS?
EDIT: As the answer mentions, the alpha aspect can be achieved using the mask property. I used a combination of the two techniques to get what I needed:
.tintedMasked {
background-image: url('theimg.png');
background-size: 100% 100%;
mask-image: url('theimg.png');
mask-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
If I understand correctly what you're trying to do, then background blending is not the way, but masking.
div {
height: 200px;
background-image:linear-gradient(SlateBlue, Tomato);
-webkit-mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
}
}
<div></div>
<h1>No stairway??</h1>
That's assuming your mask images are alpha transparent PNGs. you could also use luminance mask by setting mask-mode: luminance;
When playing with striped gradients made with CSS, I found a strange behavior of IE, where the stripes became invisible after reducing the height value in the background-size property.
This behavior only in IE: Chrome and Firefox work as expected.
Here's the code :
The HTML
<body>
<div class="stripes all"> </div>
<div class="stripes no_ie"> </div>
</body>
The CSS
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
}
.all {
background-size: 100% 98px; /* Will show stripes in IE */
}
.no_ie {
background-size: 100% 97px; /* Will not show anything in IE */
}
Here's the demo:
http://jsbin.com/jipehipobele/1/edit
Could someone explain to me why this happens and how to circumvent it, if possible?
My workaround to this problem now is changing the tabstops of the gradient a little bit:
background-image: linear-gradient(red 1px, transparent 1.1px);
This works in IE and does not change the background-size. Thank you anyway, Taruckus for helping me find this workaround.
Pretty weird issue. I found that it has to do with the browser scaling; if you zoom in at all using your browser / IE, the stripes will show. the zoom property is an old IE dog, so giving it a minimal value is hopefully an appropriate workaround.
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
zoom:1.05;
}
more on zoom http://css-tricks.com/almanac/properties/z/zoom/
I want to make a simple bar with two different colors. What I want is for the 1st color to stop and the second color to start with no transition or gradient. I know it sounds dumb, gradient with no gradient!
CSS
-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 100%);
And it produces very close results, but where the two colors meet it gets blurry because it is still doing the transition/gradient thing.
Is there a way to do perfect stops, if that's even the term?
This is my favorite gradient generator tool for CSS. There is a visual editor like photoshop and it spits out the CSS for you to copy and paste.
http://www.colorzilla.com/gradient-editor/
shortly it should be :
linear-gradient(
to top,
rgba(255,255,255,1) 60px,
rgba( 27,151,143,1) 60px
);
http://jsfiddle.net/b4j35/1/
and for chrome, it needs to overloap to avoid the blur defaut thingy thing :
http://jsfiddle.net/b4j35/2/
div.grad {
height: 100px;
background: linear-gradient(
to top,
rgba(255,255,255,1) 61px,
rgba( 27,151,143,1) 59px
);
border:solid;
}
What you have is already a no-transition gradient, since the end of the white and the beginning of the greenish are both at 60px. So, you can not do it better this way.
The way that is left is the multiple-background way:
div.grad {
height: 100px;
background: linear-gradient(to top, white, white), rgb(27,151,143);
background-size: 100% 60px;
background-position: left top;
background-repeat: no-repeat;
}
fiddle
By the way, I have changed the linear-gradient to the prefix-less version, it works like this in most modern browsers
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.