JS实现背景透明度可变，文字不透明的效果,JavaScript教程,JavaScript案例,JavaScript实例
本站中文域名：、　
　　　　　　　　
　　　　　
　|　　|　　|　　|　　
　　　　　|　　　　　|　　　　　|　　　
您的位置： &&
&& JS实现背景透明度可变，文字不透明的效果
JS实现背景透明度可变，文字不透明的效果
名目里需求实现这么个
类似网游中的聊天框，背景都是透明的，然而文字是不透明&。所以假如
使用opacity(非IE)和alpha滤镜(IE)是
无奈实现这个
动机的，会造成所有透明&。
步骤如下：
彻底透明：
设置background为transparent即可，两个阅读器通用
2.实现透明度可调节：
要求改透明度，这里IE和非IE需求
非IE阅读器可通过
支撑CSS3的
支撑CSS3的这里
忽略了)，css的写法是
background-color:rgba(255,255,255,0.5)
前面3个参数是RGB，最终个是透明度
IE阅读器需求
使用gradient滤镜，css写法是
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)
摘录CSS手册
注明用法：
filter : progid:DXImageTransform.Microsoft.Gradient ( enabled= bEnabled , startColorStr= iWidth , endColorStr= iWidth )
enabled& :& 可选项&。布尔值(Boolean)&。设置或检索滤镜是不是激活&。true | false true& :& 默许值 &。滤镜激活&。
false& :& 滤镜被禁止&。
startColorStr& :& 可选项&。字符串(String)&。设置或检索
色彩渐变的开始
色彩和透明度&。
格局为 #AARRGGBB &。 AA 、 RR 、 GG 、 BB 为十六进制正整数&。取值
规模为 00 C FF &。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB
色彩单位&。 AA 指定透明度&。 00 是
彻底透明&。 FF 是
彻底不透明&。超出取值
规模的值将被
复原为默许值&。
规模为 #FF000000 C #FFFFFFFF &。默许值为 #FF0000FF &。不透明蓝色&。
EndColorStr& :& 可选项&。字符串(String)&。设置或检索
色彩渐变的
色彩和透明度&。参阅 startColorStr 属性&。默许值为 #FF000000 &。不透明黑色&。
Enabled& :& 可读写&。布尔值(Boolean)&。参阅 enabled 属性&。
GradientType& :& 可读写&。整数值(Integer)&。设置或检索
色彩渐变的方向&。1 | 0 1& :& 默许值 &。水平渐变&。
0& :& 垂直渐变&。
StartColorStr& :& 可读写&。字符串(String)&。参阅 startColorStr 属性&。
StartColor& :& 可读写&。整数值(Integer)&。设置或检索
色彩渐变的开始
色彩&。 取值
规模为 0 C
&。 0 为透明&。
为不透清楚色&。
EndColorStr& :& 可读写&。字符串(String)&。设置或检索
色彩渐变的
色彩和透明度&。参阅 startColorStr 属性&。默许值为 #FF000000 &。不透明黑色&。
EndColor& :& 可读写&。整数值(Integer)&。设置或检索
色彩渐变的
色彩&。 取值
规模为 0 C
&。 0 为透明&。
为不透清楚色&。当在脚本中
特点时，也
可以用十六进制
格局： 0xAARRGGBB &。
在对象的背景和内容中间显示定制的
动机通过改变显示时，在渐变册
色彩层之上的文本程序性的初始化为透明的，当
色彩渐变实现后，文本
色彩会以其定义的值更新&。
支撑IE6和IE7
这么写在IE7和IE6中会有点小问题，缘由是
使用transparent的背景时，鼠标竟然能点到透明层后面的内容&。&。&。还会造成
部分事件的实效&。解决
步骤是在外面套个div，
而后给他加个
彻底透明的背景图(PNG)，写法参考：
background:url('/image/transparent.png')!background:_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/transparent.png',sizingMethod='scale'
这样在里面被嵌套的div点击就不会点到最外面的内容了&。固然非IE就不需求加这个了&。
另外，关于不
支撑CSS3的阅读器，还有个解决
步骤便是把背景层和显示文字的层
解决，放在同一级，只不过通过位置上的调整做到看似有层级关系，这样
动机就直接做也不会对文字有影响了&。
IE6下，上述
依旧无效，解决
步骤是套层iframe，在html代码里
可以这么写：
&div&&!C[if lte IE 6.5]&&iframe id=”ie6_filter” style=”position:left:0top:0z-index:-1;filter:mask();display:width:100%;height:100%;”&&/iframe&&![endif]C&&/div&
名目里需求实现这么个
类似网游中的聊天框，背景都是透明的，然而文字是不透明&。所以假如
使用opacity(非IE)和alpha滤镜(IE)是
无奈实现这个
动机的，会造成所有透明&。
步骤如下：
彻底透明：
设置background为transparent即可，两个阅读器通用
2.实现透明度可调节：
要求改透明度，这里IE和非IE需求
非IE阅读器可通过
支撑CSS3的
支撑CSS3的这里
忽略了)，css的写法是
background-color:rgba(255,255,255,0.5)
前面3个参数是RGB，最终个是透明度
IE阅读器需求
使用gradient滤镜，css写法是
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)
摘录CSS手册
注明用法：
filter : progid:DXImageTransform.Microsoft.Gradient ( enabled= bEnabled , startColorStr= iWidth , endColorStr= iWidth )
enabled& :& 可选项&。布尔值(Boolean)&。设置或检索滤镜是不是激活&。true | false true& :& 默许值 &。滤镜激活&。
false& :& 滤镜被禁止&。
startColorStr& :& 可选项&。字符串(String)&。设置或检索
色彩渐变的开始
色彩和透明度&。
格局为 #AARRGGBB &。 AA 、 RR 、 GG 、 BB 为十六进制正整数&。取值
规模为 00 C FF &。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB
色彩单位&。 AA 指定透明度&。 00 是
彻底透明&。 FF 是
彻底不透明&。超出取值
规模的值将被
复原为默许值&。
规模为 #FF000000 C #FFFFFFFF &。默许值为 #FF0000FF &。不透明蓝色&。
EndColorStr& :& 可选项&。字符串(String)&。设置或检索
色彩渐变的
色彩和透明度&。参阅 startColorStr 属性&。默许值为 #FF000000 &。不透明黑色&。
Enabled& :& 可读写&。布尔值(Boolean)&。参阅 enabled 属性&。
GradientType& :& 可读写&。整数值(Integer)&。设置或检索
色彩渐变的方向&。1 | 0 1& :& 默许值 &。水平渐变&。
0& :& 垂直渐变&。
StartColorStr& :& 可读写&。字符串(String)&。参阅 startColorStr 属性&。
StartColor& :& 可读写&。整数值(Integer)&。设置或检索
色彩渐变的开始
色彩&。 取值
规模为 0 C
&。 0 为透明&。
为不透清楚色&。
EndColorStr& :& 可读写&。字符串(String)&。设置或检索
色彩渐变的
色彩和透明度&。参阅 startColorStr 属性&。默许值为 #FF000000 &。不透明黑色&。
EndColor& :& 可读写&。整数值(Integer)&。设置或检索
色彩渐变的
色彩&。 取值
规模为 0 C
&。 0 为透明&。
为不透清楚色&。当在脚本中
特点时，也
可以用十六进制
格局： 0xAARRGGBB &。
在对象的背景和内容中间显示定制的
动机通过改变显示时，在渐变册
色彩层之上的文本程序性的初始化为透明的，当
色彩渐变实现后，文本
色彩会以其定义的值更新&。
支撑IE6和IE7
这么写在IE7和IE6中会有点小问题，缘由是
使用transparent的背景时，鼠标竟然能点到透明层后面的内容&。&。&。还会造成
部分事件的实效&。解决
步骤是在外面套个div，
而后给他加个
彻底透明的背景图(PNG)，写法参考：
background:url('/image/transparent.png')!background:_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/transparent.png',sizingMethod='scale'
这样在里面被嵌套的div点击就不会点到最外面的内容了&。固然非IE就不需求加这个了&。
另外，关于不
支撑CSS3的阅读器，还有个解决
步骤便是把背景层和显示文字的层
解决，放在同一级，只不过通过位置上的调整做到看似有层级关系，这样
动机就直接做也不会对文字有影响了&。
IE6下，上述
依旧无效，解决
步骤是套层iframe，在html代码里
可以这么写：
&div&&!C[if lte IE 6.5]&&iframe id=”ie6_filter” style=”position:left:0top:0z-index:-1;filter:mask();display:width:100%;height:100%;”&&/iframe&&![endif]C&&/div&
Google搜索中
搜狗搜索中
在线教程导航
数据库开发
产品库推荐
| 站长工具：
All Rights Reserved.
珠江路在线版权所有
苏ICP备号 中文域名：
　|　　|　当前位置导航：>>&&&&
CSS+DIV表格背景透明，内容不透明
&style type="text/css"&/*---DW8 &!--body {&&&& background-color: #0066FF;}#div1{&&&& position:/*---这里定义层不随表格透明而透明这样就可以使表格透明的时候表格里的内容和图片不跟着透明了---*/}table{background-color:#FFFFFF;filter:alpha(opacity=50,Style=0);&& /*---定义透明度,和淡化的风格&& opacity为透明度，值越大透明度越小&& style是透明淡化的风格&& 0 普通透明&& 1 从左到右渐变淡化&& 2 圆形像两边淡化&& 3 星状渐变淡化&& 默认不设置style参数为0&& 这个效果同样可以用再图片上& && ---*/width:300;height:300;&& /*---这里一定要定义宽度和高度---*/}--&&/style&&body& &table bgcolor="#0000FF" style="display:" id="tab1"&&& &tr&&&&& &td&&div id="div1"&&&&&&& &p&DIV层里的内容&/p&&&&&&& &p&&img src="" width="174" height="59" /&&/p& &&&& &/div&&/td&&& &/tr&&/table&&/body&
上一篇： 下一篇：
赞助商链接如何用css改变div的背景图或背景色透明度,并且div内的文字和图片等内容的透明度不改变_百度知道
如何用css改变div的背景图或背景色透明度,并且div内的文字和图片等内容的透明度不改变
&blog&div id=&&#47.jpg) center no-&lt&今天天气真好 热的都感觉不到热了&lt,#blog内的文字和图片blog,jpg的透明度不变;div&gt.jpg&img src=&quot:url(1;#blog{style&blog.jpg的透明度值改为50;/ /style&要求用css把#blog的背景图1;&}&&gt
既然你想做到背景层透明，只要你把这两个层分开就可以了楼上的说的知识如何做透明，这个网上搜索一下满大街都是～人家问的可不是这个问题其实很简单的，然后透明，文字不透明～那就简单了，背景层处于最下面，文字层在背景层上面不做任何效果处理
其他类似问题
按默认排序
其他1条回答
为了实现一些特殊效果，需要将页面元素变透明; -moz-opacity:0;* IE *&#47，Moz Family使用私有属性-moz-opacity: 0;
&#47.5，本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果。后面的数值是透明度，使用百分比或者小数; opacity:alpha(opacity=50)。CSS.5也支持）*/* 支持CSS3的浏览器（FF 1:alpha(opacity): filter, Moz Family部分支持CSS3）;* Moz + FF */
&#47，而标准的属性是opacity（CSS 3.5;
IE使用私有属性filter有的时候
背景色的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁CSS+DIV表格背景透明，内容不透明
&style type="text/css"&
background-color:#FFFFFF;
filter:alpha(opacity=50,Style=0);
width:300;
height:300;
&table bgcolor="#0000FF" style="display:"
id="tab1"&
id="div1"&
&p&DIV层里的内容&/p&
&p&&img src=""
width="174" height="59"
&/div&&/td&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。DIV+CSS中让布局、背景图片、文字内容居中的方法
　　在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。
　　1、首先介绍使用css属性让整体布局的居中：
　　设置对象的父级内容居中，这里一个页面的为父级是什么呢？我们可以想象整个页面的内容是由&html&&/html&和&body&&/body&这两个包含，那根据较近父级我们就设置body的CSS来实现居中问题，可以向在内容里居中有text-align:具体css的居中代码为：
　　body{text-aligh: }& 但是即使这样也会出现问题，因为你没有设置布局有多宽&width& &，一旦你内容布局中在最外层css控制中，设置了float:属性，那布局将会向你设置的float:方向靠，解决方法，除了设置body的居中的css属性外，还需对布局对象设置居中 ，而且或定义宽度是多少，假如网页宽度为700px，最外层css样式为的class=&weicheng&，那设置应该这样&.weicheng{margin:0 width:700}& &即可而这个元素在IE下有用，经过试验在火狐等浏览器下只除了此父级（body）设置text-aligh:居中 是无法让布局居中，那我们还需要对该对象设置个&margin:0& &这个是什么意思呢，意思是内容上下为0距离，而左右为&auto& &自动，这样就可以设置实现网页布局居中(这里设置margin:5 一样效果不影响实验)。完整实例为（可将代码拷贝新建html文件浏览观看效果）：
代码如下:　　&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&　　&html xmlns="http://www.w3.org/1999/xhtml"&　　&head&　　&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&　　&title&www.jb51.nte的CSS div的布局居中实例&/title&　　&style type="text/css"&　　&!--　　body{ text-align: }　　.waicheng {color: #0066CC; margin:5 width:700height:200 border:1px solid #000000;}　　--&　　&/style&　　&/head&　　&body&　　&div class="waicheng"&我是css中的居中的实验;我的布局外层有一个边为1px黑色边，我宽700px，高为200px,设置了与顶部内容距离为5PX&/div&　　&/body&　　&/html&
　　2、介绍使用css属性让网页的背景居中：
　　这里居中就包括了左右居中与上下居中，居中代码如下：
　　body{BACKGROUND:& #FFF url(/img/css-logo.gif） no-}& //这段话意思就是让css-logo.gif这个图片设置背景不重复（no-repeat ），并将居中（center）这个居中是左右居中，而垂直不需要设置，自动会居中。
　　3、css让介绍文字、图片内容左右上下居中方法教程：
　　我们知道左右就中好办，直接用text-align: 即可让文字与图片内容居中，但是垂直呢，假如我们在高度为120px的高度下垂直居中，图片居中是vertical-align:css属性，文字居中就要靠设置行高方法居中文字内容，这里我们设置为120px的高度这需要设置个line-height:120这样就通过css属性类样式来实现文字与图片的上下左右居中。
　　整个网站居中的代码如下：
代码如下:　　&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&　　&html xmlns="http://www.w3.org/1999/xhtml"&　　&head&　　&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&　　&title&www./的CSS div的完整居中实例&/title&　　&style type="text/css"&　　&!--　　body{ text-align: margin:0　　background:url(/img/css-logo.gif) no-}　　.waicheng {color: #0066CC; margin:5width:700 height:120 line-height:120 border:1px solid #000000; }　　.waicheng img {vertical-align:}　　--&　　&/style&　　&/head&　　&body&　　&div class="waicheng"&我是css中的居中的完整居中实例;我的布局外层有一个边为1px　　&img src="http://www.//img/css-logo.gif" alt="图片内容居中" /&&/div&　　&/body&　　&/html&
　　以上就是利用DIV+CSS中让布局居中、背景图片居中、文字内容居中的代码，谢谢阅读，希望能帮到大家，请继续关注网管之家，我们会努力分享更多优秀的文章。
顶一下(0) 踩一下(0)
热门标签：