All geek questions in one place

CSS3 Gradients And Background Image

I have a function that when changing the status of a checkbox, toggles its parent's class to give a different background gradient. Click on Lorem to see it in action.

You can see it here .

The problem is that in my example this will not work in a larger field, since there is a background image for my element, I know that the gradient cannot exist in the same space as the background image.

Is there a way around this element to add a background gradient to the element? I cannot add it to the image, as it will be dynamically populated, and not all images will be the same.

I don't mind changing HTML / CSS at all. If this can be done using jQuery, this is great too :)

+4
source share
2 answers

Gradients in CSS 3 are actually just a generated image. Therefore, if your browsers support multiple backgrounds (use Modenizr to check this out), you can add 2 background images. How:

.multiplebgs.cssgradients .button { background-image: url("img.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(247,148,34,0)), to(#dc7703)); background-image: url("img.png"), -webkit-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); background-image: url("img.png"), -moz-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); background-image: url("img.png"), linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); }
+6
source

You can add another div around the background image element and apply a gradient to it. While the image is transparent, a gradient will appear.

 <div id="div-with-gradient"> <div id="div-with-image"> <!-- content --> </div> </div>
+1
source

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

More articles:


All Articles