转载 - 背景透明，文字不透明【学习】
生活随笔
收集整理的這篇文章主要介紹了
转载 - 背景透明，文字不透明【学习】
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
【 以下方法，測(cè)試后，IE6下，背景并未透明，暫不知解決辦法。】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明，文字不透明</title> <style> *{padding: 0;margin: 0; }body{padding: 50px;background: url(img/bg.png) 0 0 repeat; }.demo{padding: 25px;background-color: rgba(0,0,0,0.5);/* IE9、標(biāo)準(zhǔn)瀏覽器、IE6和部分IE7內(nèi)核的瀏覽器(如QQ瀏覽器)會(huì)讀懂 */ } .demo p{color: #FFFFFF; } @media \0screen\,screen\9 {/* 只支持IE6、7、8 */.demo{background-color:#000000;filter:Alpha(opacity=50);position:static; /* IE6、7、8只能設(shè)置position:static(默認(rèn)屬性) ，否則會(huì)導(dǎo)致子元素繼承Alpha值 */*zoom:1; /* 激活I(lǐng)E6、7的haslayout屬性，讓它讀懂Alpha */}.demo p{position: relative;/* 設(shè)置子元素為相對(duì)定位，可讓子元素不繼承Alpha值 */} }</style> </head> <body> <div class="demo"><p>背景透明，文字不透明</p> </div></html>
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明，文字不透明</title> <style> *{padding: 0;margin: 0; }body{padding: 50px;background: url(img/bg.png) 0 0 repeat; }.demo{padding: 25px;background-color: rgba(0,0,0,0.5);/* IE9、標(biāo)準(zhǔn)瀏覽器、IE6和部分IE7內(nèi)核的瀏覽器(如QQ瀏覽器)會(huì)讀懂 */ } .demo p{color: #FFFFFF; } @media \0screen\,screen\9 {/* 只支持IE6、7、8 */.demo{background-color:#000000;filter:Alpha(opacity=50);position:static; /* IE6、7、8只能設(shè)置position:static(默認(rèn)屬性) ，否則會(huì)導(dǎo)致子元素繼承Alpha值 */*zoom:1; /* 激活I(lǐng)E6、7的haslayout屬性，讓它讀懂Alpha */}.demo p{position: relative;/* 設(shè)置子元素為相對(duì)定位，可讓子元素不繼承Alpha值 */} }</style> </head> <body> <div class="demo"><p>背景透明，文字不透明</p> </div></html>
?簡(jiǎn)單闡述 @media ，網(wǎng)址轉(zhuǎn)載：http://blog.sina.com.cn/s/blog_6d208b470102v35u.html
僅IE6和IE7識(shí)別@media screen\9 { .selector { property: value; } } 僅IE6和IE7、IE8識(shí)別@media \0screen\,screen\9 { .selector { property: value; } } 僅IE8識(shí)別@media \0screen { .selector { property: value; } } 僅IE8-10識(shí)別@media screen\0 { .selector { property: value; } } 僅IE9和IE10識(shí)別@media screen and (min-width:0\0) { .selector { property: value; } } 僅IE10識(shí)別@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-spe 僅支持谷歌@media screen and (-webkit-min-device-pixel-ratio:0) {.footer .layout-help { padding-bottom:357px; } }}
?
轉(zhuǎn)載于:https://www.cnblogs.com/JaneBlog/p/7682333.html
總結(jié)
以上是生活随笔為你收集整理的转载 - 背景透明，文字不透明【学习】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 常识之外的规范——阿里java开发手册笔
- 下一篇： 【Linux】linux下gzip的压缩