Geek Answers Handbook

How to add opacity to the background?

How to add opacity to the following CSS statement?

background: none repeat scroll 0 0 #205081;

Is there any possibility with css2? Otherwise, how can I add an opacity statement from css3?

0
source share
2 answers

Unfortunately, for different versions and types of browsers around the world, there is no single CSS entry that is compatible in all browsers without JavaScript intervention. However, you can use several modeling methods and access browsers that don’t like modern code using the “if IE 7” HTML code in your head.

Here are a few methods to consider for maximum cross-browser compatibility.

Adding an alternative method for older browsers

If you need transparent backgrounds in later versions of Internet Explorer, this method is simplified for older versions of browsers using old code. You can filter style rules by adding the following code to

 <head> </head>

your HTML or PHP file.

HTML WITH HEAD

You should add the following code if you do not already have it. Currently, many frameworks and CMS include, so just review the source before editing and add only if it is not already them.

 <!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]--> <!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]-->

Make transparent 50 percent PNG file

Just upload any photoshop or any good alternative and create a new 1x1 file, then add a new layer and remove the background. Then inside the layer fill it with the color you want to use, then make this layer opacity 50%. Then save it as PNG and upload it to your hosting. If you are worried about the loading time on the pages, you can use PNGCrush or Smush.it to compress this PNG to less than 0.5 kbytes.

In CSS add this (you need to use IF 7/6, etc.)

 .ie6, .ie7, .ie8 .your-div-class-or-id { background: transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=background.png,sizingMethod='scale'); }

}

CSS for new browsers

You should use the new code for newer browsers whenever possible, and without using PNG to create a transparent background, this means that we do not increase the page load time by adding a file selection. Just add:

 background: rgba(32, 80, 129, 0.5)

What will work with modern browsers such as IE9 +, Firefox, Chrome, Safari

You should use both modern and old CSS in combination

Note that you use both CSS elements: RGBA and AlphaImageloader, so the png file is used only when it is absolutely necessary. I know that many of them are unfavorable for using PNG with Opacity, but you use it only in the worst case and not loading it when using a newer browser.

+1
source

Use rgba () . In your case

background: rgba (32, 80, 129, 1)

where the last number is opacity. 1 is not transparency; 0 is invisible. Therefore, if you want 50% opaque, this will be

background: rgba (32, 80, 129, 0.5)

+2
source

More articles:


All Articles