All geek questions in one place

CSS3 linear gradient + rgba, not so true transparency

I have a page setup that looks something like this:

<body> <div id="wrapper"> <!--- ... content ... --> </div> </body>

The body has a background color and a tiled image that adds some noise and grain to the background. In addition, #wrapper has a linear gradient as the background, which goes from rgba (0,0,0, .3) to rgba (0,0,0,0), and the gradient expands by 24 pixels at the top of the div, which located at the top of the page --- to add a shadow.

My problem is that the color that the #wrapper background has after completing the 24-pixel gradient is not true transparency, even if the final color of the gradient has an alpha value of zero. What leaves me alone is not a true transparent background on #wrapper, which leaves a visible “split line” against the background of the body in the place where #wrapper stops.

How to get a gradient for full transparency? I would suggest that an alpha value of zero would do this. In addition, using the transparent keyword also does not allow it.

Update

I added photos to show the problem. The first image is the real appearance, and the second significantly shows where the line is, because it is there, although the first image is very unclear.

actual lookenter image description here

As you can see, the gradient is not included in true transparency. Not when color is specified as rgba(0,0,0,0) or transparent .

- Chris Buchholz

+4
source share
3 answers

Are you testing it in webkit (chrome / safari), firefox, IE or Opera? Because they all view gradients differently.

I don’t quite understand, although I think you should use CSS gradient generators on the Internet, most of them use solid colors, just replace the hexadecimal decimal with the new RGBA ().

This is the best way to find out how wrong you are.

Other then if you have defined opacity on the wrapper div, which can be a problem.

This is the best I can do.

0
source

You have not provided your CSS code. This will help to better understand the problem. But one of the possible problems is probably the styling of CSS properties.

 #wrapper { background: rgb(174,188,191); background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); }

Expected example

 #wrapper { background: rgb(174,188,191); background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); background: #111; /*Overrides the above properties*/ }

You migrated the first with a different background property, perhaps somewhere in your CSS with a higher priority, making your transparency too high:

Overstatement example

0
source

I had the same problem ... and realized that this was because I was saving the images as JPG. You need something that supports transparency.

-1
source

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

More articles:


All Articles