求css背景透明与文字不透明的方法_html/css_WEB-ITnose
程序员文章站
2022-04-13 19:04:34
...
求背景图片透明,文字不透明的方法,兼容各种浏览器最好。
目前知道两种。测试浏览器chrome ie11
方法一(目前最满意,只是不支持图片)
background:rgba(255,255,255,0.5) !important;
两者都支持
方法二(span在div中)
div{
filter:alpha(opacity=20);
opacity:0.2;,
}
span{
position:absolute;
}
ie11支持,chrome不支持!!
通过css如果可以改就可以更个性化了。
如果只是背景色的话没问题,我现在问的是背景图片。
目前知道两种。测试浏览器chrome ie11
方法一(目前最满意,只是不支持图片)
background:rgba(255,255,255,0.5) !important;
两者都支持
方法二(span在div中)
div{
filter:alpha(opacity=20);
opacity:0.2;,
}
span{
position:absolute;
}
ie11支持,chrome不支持!!
回复讨论(解决方案)
把背景图片本身制作成半透明的png格式不就得了
要分工
一个层做背景 透明
一个层显示文字
然后2个层 放在一个div里面
http://leegorous.net/tools/bg-alpha.html
用这个工具生成兼容代码,高级浏览器用alpha透明,ie用filter透明。
把背景图片本身制作成半透明的png格式不就得了
通过css如果可以改就可以更个性化了。
http://leegorous.net/tools/bg-alpha.html
用这个工具生成兼容代码,高级浏览器用alpha透明,ie用filter透明。
如果只是背景色的话没问题,我现在问的是背景图片。
下一篇: 原生Javascript插件开发实践
推荐阅读
-
tips 前端 背景与元素的透明和模糊_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明(兼容各浏览器)_html/css_WEB-ITnose
-
Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法_html/css_WEB-ITnose
-
Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明(各浏览器兼容)_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明,兼容所有浏览器_html/css_WEB-ITnose
-
【原】CSS实现背景透明,文字不透明,兼容所有浏览器_html/css_WEB-ITnose
-
css实现的文字位于图片之上且背景半透明_html/css_WEB-ITnose
-
css实现的文字位于图片之上且背景半透明_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明,兼容所有浏览器_html/css_WEB-ITnose