Home  >  Article  >  Web Front-end  >  How to make css background transparent and text opaque_html/css_WEB-ITnose

How to make css background transparent and text opaque_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:181910browse

Find a way to make the background image transparent and the text opaque. It is best compatible with various browsers.

There are currently two types known. Test browser chrome ie11
Method 1 (most satisfactory so far, but does not support images)
background:rgba(255,255,255,0.5) !important;
Both support
Method 2 (span in div Medium)
div{
filter:alpha(opacity=20);
opacity:0.2;,
}
span{
position:absolute;
}
IE11 supports it, chrome does not support it! !


Reply to discussion (solution)

Just make the background image itself into a translucent png format

It is necessary to divide the work

One layer to make the background transparent
One layer to display the text

Then put the two layers inside a div

http://leegorous. net/tools/bg-alpha.html
Use this tool to generate compatible code. Advanced browsers use alpha transparency, and IE uses filter transparency.

Just make the background image itself into a translucent png format.


If it can be changed through css, it will be more personalized.

http://leegorous.net/tools/bg-alpha.html
Use this tool to generate compatible code. Advanced browsers use alpha transparency, and IE uses filter transparency.


If it’s just the background color, no problem. What I’m asking about now is the background image.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn