转载 - 背景透明,文字不透明【学习】
生活随笔
收集整理的这篇文章主要介绍了
转载 - 背景透明,文字不透明【学习】
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
【 以下方法,测试后,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、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ } .demo p{color: #FFFFFF; } @media \0screen\,screen\9 {/* 只支持IE6、7、8 */.demo{background-color:#000000;filter:Alpha(opacity=50);position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */}.demo p{position: relative;/* 设置子元素为相对定位,可让子元素不继承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、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ } .demo p{color: #FFFFFF; } @media \0screen\,screen\9 {/* 只支持IE6、7、8 */.demo{background-color:#000000;filter:Alpha(opacity=50);position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */}.demo p{position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */} }</style> </head> <body> <div class="demo"><p>背景透明,文字不透明</p> </div></html>
简单阐述 @media ,网址转载:http://blog.sina.com.cn/s/blog_6d208b470102v35u.html
仅IE6和IE7识别@media screen\9 { .selector { property: value; } } 仅IE6和IE7、IE8识别@media \0screen\,screen\9 { .selector { property: value; } } 仅IE8识别@media \0screen { .selector { property: value; } } 仅IE8-10识别@media screen\0 { .selector { property: value; } } 仅IE9和IE10识别@media screen and (min-width:0\0) { .selector { property: value; } } 仅IE10识别@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; } }}
转载于:https://www.cnblogs.com/JaneBlog/p/7682333.html
总结
以上是生活随笔为你收集整理的转载 - 背景透明,文字不透明【学习】的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇: 常识之外的规范——阿里java开发手册笔
- 下一篇: 对于并列的TextField实现同步控制