Answer by fubo for How do I reduce the opacity of an element's background...
I just was wondering why this notation here was missingbackground-color: #fffb;#fff is the color, b the opacity from 0 to fFirefox:
View ArticleHow do I reduce the opacity of an element's background using CSS?
Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?I'd like to accomplish this without having the text...
View ArticleAnswer by Chris for How do I reduce the opacity of an element's background...
The easiest method would be to use a semi-transparent background PNG image. You can use JavaScript to make it work in Internet Explorer 6 if you need to.I use the method outlined in Transparent PNGs in...
View ArticleAnswer by fearoffours for How do I reduce the opacity of an element's...
Opacity of background, but not the text has some ideas. Either use a semi-transparent image, or overlay an additional element.
View ArticleAnswer by SvenFinke for How do I reduce the opacity of an element's...
The problem is, that the text actually has full opacity in your example. It has full opacity inside the p tag, but the p tag is just semi-transparent.You could add an semi-transparent PNG background...
View ArticleAnswer by philnash for How do I reduce the opacity of an element's background...
A while back, I wrote about this in Cross Browser Background Transparency With CSS. Bizarrely Internet Explorer 6 will allow you to make the background transparent and keep the text on top fully...
View ArticleAnswer by Georg Schölly for How do I reduce the opacity of an element's...
Either use a semi-transparent PNG or SVG image or use CSS:background-color: rgba(255, 0, 0, 0.5);Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).Beware that the text still...
View ArticleAnswer by Gelens for How do I reduce the opacity of an element's background...
It's better to use a semi-transparent .png.Just open Photoshop, create a 2x2 pixel image (picking 1x1 can cause an Internet Explorer bug!), fill it with a green color and set the opacity in "Layers...
View ArticleAnswer by Sebastian Markbåge for How do I reduce the opacity of an element's...
In Firefox 3 and Safari 3, you can use RGBA like Georg Schölly mentioned.A little known trick is that you can use it in Internet Explorer as well using the gradient filter.background-color: rgba(0,...
View ArticleAnswer by paris ionescu for How do I reduce the opacity of an element's...
Here's how I do this (it might not be optimal, but it works):Create the div that you want to be semi-transparent. Give it a class/id. Leave it empty, and close it. Give it a set height and width (say,...
View ArticleAnswer by Slipp D. Thompson for How do I reduce the opacity of an element's...
For a simple semi-transparent background color, the above solutions (CSS3 or bg images) are the best options. However, if you want to do something fancier (e.g. animation, multiple backgrounds, etc.),...
View ArticleAnswer by Gorkem Pacaci for How do I reduce the opacity of an element's...
This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome, and Internet Explorer as far as I can see.Put a container div and two children divs at the same...
View ArticleAnswer by joren for How do I reduce the opacity of an element's background...
Here is a jQuery plugin that will handle everything for you, Transify (Transify - a jQuery plugin to easily apply transparency / opacity to an element’s background).I was running into this problem...
View ArticleAnswer by thinsoldier for How do I reduce the opacity of an element's...
Almost all these answers assume the designer wants a solid color background. If the designer actually wants a photo as the background the only real solution at the moment is JavaScript like the jQuery...
View ArticleAnswer by frozenkoi for How do I reduce the opacity of an element's...
This method allows you to have an image in the background and not only a solid color, and can be used to have transparency on other attributes such as borders. No transparent PNG images are...
View ArticleAnswer by Will Nielsen for How do I reduce the opacity of an element's...
background-color: rgba(255, 0, 0, 0.5); as mentioned above is the best answer simply put. To say use CSS 3, even in 2013, is not simple because the level of support from various browsers changes with...
View ArticleAnswer by Touhid Rahman for How do I reduce the opacity of an element's...
CSS 3 has an easy solution of your problem. Use:background-color:rgba(0, 255, 0, 0.5);Here, rgba stands for red, green, blue, and alpha value. The green value is obtained because of 255 and half...
View ArticleAnswer by Henrik for How do I reduce the opacity of an element's background...
You can solve this for Internet Explorer 8 by (ab)using the gradient syntax. The color format is ARGB. If you are using the Sass preprocessor you can convert colors using the built-in function...
View ArticleAnswer by Suraj Rawat for How do I reduce the opacity of an element's...
If you are a Photoshop guy, you can also use: #some-element { background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1** }Or:#some-element { background-color: rgba(170, 190,...
View ArticleAnswer by web-tiki for How do I reduce the opacity of an element's background...
There is a trick to minimize the markup: Use a pseudo element as the background and you can set the opacity to it without affecting the main element and its children:DEMOOutput:Relevant code:p {...
View Article