I have a page setup that looks similar to this:
<body>
<div id="wrapper">
<!--- ... content ... -->
</div>
</body>
The body has a background color and a tiling image that adds some noise and grain to the background. On top of that, #wrapper has a linear gradient as background that goes from rgba(0,0,0,.3) to rgba(0,0,0,0) and the gradient expands over 24 pixels at the top of the div, which is at the top of the page --- to add a shadow.
My problem is, that the color that the background of #wrapper holds after the 24 pixel gradient is done, is not true transparency, even though the end color of the gradient has an alpha value of zero. What this leaves me with, is a not true transparent background on #wrapper, that leaves a visible "split-line" on the body-background at the spot where #wrapper stops.
How do I get the gradient to go in to full transparency? I would guess an alpha value of zero would do this. Also, using the transparent keyword doesn't solve it either.
Update
I have added pictures to show the problem. The first picture is the actual look, and the second significantly shows where the line is, because it's there, though very unclear on the first picture.
As you can see, the gradient doesn't go in to true transparency. Not when the to-color is specified as rgba(0,0,0,0) or transparent.
-- Chris Buchholz
Are you testing it in a webkit browser (chrome/safari), firefox, IE or Opera? As they all treat gradients differently.
I don't fully understand though I believe you should consider using CSS gradient generators online, most of them use solid colors, just replace the hex decimal with the new RGBA().
That's the best way to learn how you're going wrong.
Other then that If you've defined opacity on the wrapper div that could be the Issue.
That's the best I can do
You didn't supply your CSS code. That will help spot the problem better. But one of possible issue is probably the stacking 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%);
}
Sample expected
#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 overrode the first with another background property, maybe somewhere in your CSS with higher priority, causing your transparency overriden:
Sample overriden
I had the same kind of problem... and realized it was because I was saving the images as JPGs. You need something that supports transparency.
Related
I am searching for a pure CSS method for creating transparent text within a box(div,p,etc) where the box is filled with a color surrounding the text, but not the text itself (which would be transparent a la rgba/hsla).
Imagine a div styled in such a way that the text color within is rgba .2 alpha lvl, and the background color is solid, where the background solid color cannot be seen in the text. Of course, a solution using multiple stacked divs/blocks would be greatly acceptable, but should allow for a hover state, so the effect can be switched on/off. In using this, one could apply this div on top of an image or another div that can be seen through the letters.
SO! CSS/html works in such a way that text is always applied on top of a background (called a background for a reason), so, using transparent colors on text color does nothing but show the color of the background. I have tried creating a background with a big box shadow, in order to see if it's ever calculated differently, and it is not (and couldn't think of another method).
Instead of blabbering on with my limited CSS knowledge, I think you get the point, so give me your best! I want this to work in Chrome and Firefox at least.
Stacked Overflow doesn't allow me to put a jsfiddle without accompanied code, and I don't want to put pointless code here just to link to a 'starting point' code.
Instead, here's an image explaining the obvious idea:
Demo Fiddle
You CAN accomplish this in CSS only, but with limited support.
You can set the -webkit-background-clip property, and -webkit-text-fill-color to transparent.
This will only work in webkit browsers however.
e.g.:
div {
color: white; /* Fallback */
background: url(yourimage.png) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
See here for more on background-clip
The background-clip CSS property specifies whether an element's
background, either the color or image, extends underneath its border.
If there is no background image, this property has only visual effect
when the border has transparent regions (because of border-style) or
partially opaque regions; otherwise the border covers up the
difference.
Alternatively- you can use SVG, per this question
I have a following situation:
Div has to have a solid color on top, and then at the bottom thee should be a transparent image 1px wide.
(So final look should be that I have a gradient from top to bottom of div)
When I put :
background: #fff url("../../images/bck1px.png") repeat-x scroll center bottom transparent;
white color is shown over transparent image
I have to do this in CSS2 style!
Can anybody help?
Here is a link... maybe this is what you want to do.
If yes, the trick is to use the image and have it align in the bottom of the div and repeat horizontally. The clear is there to make sure to push the bottom of you container div.
http://jsfiddle.net/etienne_carre/GEkFn/
Good luck
It’s not entirely clear what you’re asking — a transparent image is transparent, so it won’t create a gradient.
In the code you’ve posted, you have applied a white background colour as well as an image (background: #fff url...). If you leave out the colour (background: url...) you shouldn’t get white any more. I don’t know if that’ll solve your problem.
If you could post all the CSS applied to the <div>, that might help.
If someone ever arrives here, future has finally come and there is better ways to do it.
Please refer to the following links for a CSS method:
Gradient opacity on the bottom of div
I'm trying to use SCSS to fake a white transparent color overlaying another solid color. I could easily do background-color:rgba(255,255,255,.5) on the overlay <div>, but I'd rather have a solution that doesn't require the browser to support rgba colors. Also, since I'm using SCSS variables, I won't necessarily know what the bottom color is beforehand, so I'll need to calculate the result.
It seems like one of the SCSS color functions should be able to achieve this effect, but I've tried a few things, and I can't seem to get it to work.
Does anyone know how to do this?
Here's a demo to better illustrate what I'm trying to do, or you can see the code pasted below.
http://jsfiddle.net/BRKR3/
HTML
<div class="background">
<div class="overlay rgba"></div>
</div>
<div class="background">
<div class="overlay scss"></div>
</div>
SCSS
$background: #009966;
.background {
background-color:$background;
height:60px;
margin:20px;
padding:20px;
width:60px;
}
.overlay {
height:60px;
width:60px;
}
.rgba {
background-color:rgba(255,255,255,0.5);
}
/* works if $background is $808080, but not if it's a color */
.scss {
background-color:scale-color($background, $lightness:150%);
}
UPDATE
Here's a working jsFiddle using Chuck's answer:
http://jsfiddle.net/BRKR3/3/
Lightness doesn't blend a color with white; it makes it a lighter color, which means it's lighter but the components are also more intense (whereas blending with white makes them more muted). You can think of lightness as multiplying the color. In order to get a screen effect when you adjust lightness, you need to decrease the saturation proportionately.
To get the effect you want, just use mix($background, white, 50%). This performs the same kind of blending that compositing colors with alpha does.
I dont' see how changing the lightness would be like faking a white transparent overlay. Also, I don't think you can achieve what you want using sass as you need to know your bottom color in order to give the top color a value.
If you can't use rgba and don't know what your bottom color is, you could use a white transparent 10x10px png as a background. If you need IE6 support, use an IE png fix or filters (not w3c compliant afaik).
.overlay {
background: transparent url('transparent-white.png') repeat;
{
That being said, my humble opinion is that we should leave IE9< behind when talking about using rgba, it's just too messy to give them support, and not generally worth it.
EDIT:
You are using $lightness property with a value of 150%, while it only accepts values between 0% and 100%. If you use 0% you get the same color, while using 100% you get white. If background color is solid, you can use, as you said in your question, the scale_color function like this:
.scss {
background-color:scale-color($background, $lightness:50%);
}
It will result in your background color but a 50% lighter. Basically you got all the job done but using 50% instead of 150% :)
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
element{ background:#000 (url) top left repeat-x; }
This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.
3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.
My idea is that a PNG overlaying some text, with transparency ranging from 0% to 100%, all colored in the same color as the CSS background, would fade out the text underlying it.
Turns out the transparent PNG is visible also in the areas where it's supposed to be transparent. Also, the colors of the PNG and the CSS are not the same - even though I create them with the same hex-values.
An image is included. I have tried creating the resource in Illustrator, Photoshop and Fireworks. I have tried removing the gamma-information (gAMA) with pngcrush, PNGSquash and ImageMagick. The problem is the same on Firefox as in Safari.
If anyone knows how to solve this -- or if it's even possible -- I'd love to hear it! Thank you in advance.
I can't immediately solve the issue you're experiencing, but I can offer an alternative text-fading solution, if that's of any use?
.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */
}
the value of 0.0 at the end is the alpha value, and can range from 0 to 1, with 0 being opaque and 1 being transparent. rgba has problems on browsers other than Firefox insofar as I've experimented.
perhaps
.text-to-fade {opacity: 0.5; /* for most browsers */
filter: alpha(opacity=50); /* for IE */
}
The reason it appears to be a different color is because it's transparent, not because the colors are actually different. To demonstrate this, open an image editor that supports layers. Create a white bottom layer and a black top layer. Set the opacity of the black layer to 50% and merge the layers down. Use a color picker to check the color. It's going to be #808080, not black.
The reason it's not fading is because that color is additive. Say your text is #808080 too: in places where there's text, you have #808080 overlaying #808080--and that ends up being something like #424242 rather than canceling out as you want. There's really not a great way to do what you're trying to do inside a web browser in only one step.
One thing to do would be to make the text invisible (visibility: hidden;) with javascript. Another option would be to use relative or absolute positioning and set up the z-indices so things look something like this:
3: TRANSPARENT-GREY
2: button/any other objects
1: OPAQUE-GREY
0: text
That will block out the text and leave anything else partially visible.