欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

转载 - 背景透明,文字不透明【学习】

发布时间:2025/3/19 编程问答 36 豆豆
生活随笔 收集整理的这篇文章主要介绍了 转载 - 背景透明,文字不透明【学习】 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
【 以下方法,测试后,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>

 简单阐述 @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

总结

以上是生活随笔为你收集整理的转载 - 背景透明,文字不透明【学习】的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。