Quantcast
Channel: How do I reduce the opacity of an element's background using CSS? - Stack Overflow
Browsing index pages (31 articles)

Image may be NSFW.
Clik here to view.

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 Article


How 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 Article


Answer 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 Article

Answer 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 Article

Answer 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 Article


Answer 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 Article

Answer 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 Article

Answer 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 Article


Image may be NSFW.
Clik here to view.

Answer 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 Article


Answer 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 Article

Image may be NSFW.
Clik here to view.

Answer 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 Article

Answer 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 Article

Answer 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 Article


Answer 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 Article

Answer 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 Article


Answer 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 Article

Answer 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 Article


Answer 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 Article

Answer 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 Article

Image may be NSFW.
Clik here to view.

Answer 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
Browsing index pages (31 articles)


Latest Images