您现在的位置是：心海E站 > 文案短句 > >正文
css透明度(css设置背景透明度)
发布时间：2023-10-31 13:44:09 admin 阅读:59
1、我们先来看看不加透明的效果。我是做了两层背景，图片为一个背景，文字下面又添加了一个纯色的背景，我们要做的就是把纯色背景设置成半透明的效果。。
2、方法一：用rgba值设置背景现在ps里面看下我们的背景颜色的rgb值是多少。然后background:rgba(39,60,125,0.5);前三个数字为我们在ps里面看到的rgb值，最后一个数字是透明的色值，为0-1之间的数值，数字越大，越不透明，0为完全透明，1为完全不透明。设置之后可以看到，背景色变成了半透明的效果，而我们的文字内容是不透明的。。
3、以上方法用着简单，但是不兼容ie8以下的浏览器。我们需要添加一个IE滤镜就可以解决兼容性问题了。如下图所示，我们需要添加filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F273c7d,endColorstr=#7F273c7d);本来这个是实现渐变效果的，但是我们这里要实现半透明效果，所以两个颜色设置成一样的了。就是startColor和endColor的值。这两个值是有两部分组成的，前两个值代表了不透明度(换成了16进制的数值)如下图所示为其对应的值。这样设置了以后就兼容ie8以下的浏览器了。。
4、方法二：定位法设置文字内容和背景内容不在一个层上。让文字内容浮动到半透明的背景层上。如果你的文字在半透明背景层的下面，要设置z-index的值让文字位于背景的上面就行了。。
5、以上就是两种设置背景为半透明，内容不透明的两种方法了。如果你需要考虑浏览器兼容性的话就选择第二个方法，如果完全放弃了ie浏览器，就可以大胆的用第一种方法了。。
二、div+css如何实现背景图半透明文字内容不透明？1、我们这里主要是为了好对比，采用了两个数据，如下图的div+css显示情况。其中div和css样式相似，如下图。
2、在浏览器下进行代码html下面的查看，具体对比图如下图显示，bg和bg1中间有一个10px的距离，以便更好的对比。。
3、div中有一个opacity,可以去处理一下css的透明度，在第一个bg添加filter:alpha(opacity=30);opacity:0.，我们可以看到不只是图片背景有透明，文字相应的也做了透明处理，如下面对比图。
4、那么，我们现在要解决的问题就是，怎么让文字不透明而背景色透明，或者说背景图片透明。第一种，可以直接对图片进行透明度处理，用ps软件，如下图，对图片透明度进行处理。。
5、用图片进行透明度处理之后，需要在css里修改图片的选择，如下图一个选择为bg2,一个背景图选择bg。
6、此时的html显示情况如下图，可以很清楚的看到图片的颜色变浅了，而文字的颜色却没有变化。。
7、对于如果是颜色背景的话，可以直接用css样式进行透明的处理，如下图的background:rgba(0,0,0,0.2)nonerepeatscroll!important;。
8、在背景色里，我们是以黑色为背景，以红色为字体样式，在对比的html里，可以看到背景色发生了变化，而文字颜色没有变。如下图。
三、div在css中透明度怎么调1、新建一个html文件，命名为test.html，用于讲解div在css中透明度怎么调。。
2、在test.html文件内，创建两个div，分别设置其class属性为divdiv用于下面使用css对类名进行样式的设置。 。
3、使用css统一设置两个div绝对定位在页面的顶部，并浮动向左。这样布局可以让两个div重叠，设置透明度时可以看到明显的效果。 。
4、使用css设置类名为div1的div宽度为400px，高度为200px，背景颜色为黄色。 。
5、使用css设置类名为div2的div宽度为100px，高度为100px，背景颜色为绿色。。
6、使用css设置类名为div2的div透明度。针对IE浏览器使用filter属性设置，针对firefox浏览器使用-moz-opacity属性设置，其他的浏览器使用opacity属性设置。透明度值越小，越透明。例如，下面设置div透明度为30% 。
7、在浏览器打开test.html文件，查看设置了透明度的div的效果。 。
四、怎么设置CSS表格背景透明度？1、新建一个html文件，命名为test.html，用于讲解div在css中透明度怎么调。
五、css中如何设置透明度1、创建一个html文件。
2、在html文件找到一个标签，在这个标签里创建一个标签并添加一个类，在这把这个类设置为、rgba。
3、代码、为div添加样式。
4、在标签后面创建一个，在标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。
5、透明度参数，取值在0~1之间，不可为负值，透明度参数越小透明度越高。
6、代码、.rgba{background-color、rgba(0,0,0,0.5)height、200px}保存后使用浏览器查看。
7、可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。
8、所有代码。
9、可以把所有代码复制到新建的html文件上，保存好后使用浏览器打开借口看到效果。
10、所有代码、css设置背景透明.rgba{background-color、rgba(0,0,0,0.5)height、200px}。
六、CSS如何设置div背景透明度且兼容性良好_html/css_WEB-ITnose1、CSS如何设置div背景透明度且兼容性良好、建议、尽可能的手写代码，可以有效的提高学习效率和深度。
2、设置对象的透明度在很多网页特效中都有实用，设置对象的透明度并不难，唯一的难点可能就是如何兼容各大主流浏览器，下面就简单介绍一下如何实现此效果。
3、代码实例如下、蚂蚁部落*{margin、0pxpadding、0px}.opacity{width、150pxheight、150pxbackground-color、greenfilter、alpha(opacity=50)-moz-opacity、0.5opacity、0.5margin-left、20pxmargin-top、20px}span{display、blockwidth、80pxheight、80px}蚂蚁部落上面的代码实现了各个浏览器的兼容。
4、起透明效果的代码如下、filter、alpha(opacity=50)-moz-opacity、0.5opacity、0.5第一行代码仅能在IE浏览器中有效。
5、第二行代码支持老版本的FF浏览器，其实去掉也可以，因为老版本的浏览器使用率很少了。
6、第三行能够支持各大浏览器，但是IE6-IE8浏览器不支持。
7、特别说明、虽然实现了背景透明，但div中的文字也呈现为透明状态，这往往不是想要的，可以参阅如何设置div的透明度但是其中的文字不透明一章节解决此问题。
8、原文地址、http、//www.softwhy.com/forum.php?mod=viewthread&tid=4680。
七、css中如何设置透明度1、怎样在CSS样式中设置清滚背景的透明度,下面一个具体的实例。
2、把类为box的层设为透明。
3、.box{width、300pxheight、200pxmargin、0autoboxder、1pxsolid#cccbackground、#000filter、alpha(opacity、30)opacity、0.3-moz-opacity、0.3-khtml-opacity、0.3}其中background、#000filter、alpha(opacity、30)opacity、0.3为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
4、其关的属性介绍如下、opacity、0.3。
5、这是“最重要的”，因为它是在CSS的现行标准。
6、这将在Firefox，Safari和Opera的大多数版本的工作。
7、这将是你所需要的一切如果所有的浏览器都支持目前的标准。
8、当然是他们不会错。
9、filter、alpha(opacity=30)这一个是针对IE浏览器-moz-opacity、0.3你需要这一个支持老版拍正信本的Mozilla浏袭轮览器如NetscapeNavigator。
10、-khtml-opacity、0.3这是旧版本的Safari(×)当渲染引擎是使用仍被称为kthml，而不是目前的WebKit。
八、css把背景变全透明1、创建一个html文件。
九、百度空间怎样设置CSS可以让分类栏透明,不耽误看背景画面啊1、◆空间背景半透明在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。
2、还可以通过指定坐标，从而实现各种不同范围的透明度。
3、具体语法如下、{filter、alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}具体参数含义如下、opacity透明度。
4、默认的范围是从0到他们其实是百分比的形式。
5、也就是说，0代表完全透明，100代表完全不透明。
6、finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。
7、范围也是0到100。
8、以上的参数可以选用，可以只设置一个opacity例如、{filter、alpha(opacity=50)}这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用""间隔，不然设置是无效的例如、我要设置模版区域背景的颜色(白色)+半透明(就是我现在blog的效果)只要在.modbox{}.modbl{}.modbc{}.modbr{}中都设置background-color、white这些就是模版背景设置的ID然后再在.modbox,.modbl,.modbc,.modbr{}中加入filter、alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可background、transparent这就是背景全透明的代码各模版ID请参照链接、百度空间CSS说明不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在.modbl{}.modbc{}.modbr{}中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明如果不想设置全透明的话，可以把.modbl{}.modbc{}.modbr{}三个中的background、transparent改成.modbox{}中的background-color、#FFFFFF，当然这里的#FFFFFF你可以换成自己喜欢的颜色，不过为了美观统建议这4个的颜色代码最好设置为一样的附、#FFFFFF就是white，白色。
9、#000000就是black，黑色.modbox{padding、10px10px010pxbackground-color、#FFFFFFborder-left、1pxsolid#813533border-right、1pxsolid#813533}.modbox{padding、10px10px010pxbackground-color、#FFFFFFborder-left、1pxsolid#FFFFFFborder-right、1pxsolid#FFFFFF}modbl{background-color、#FFFFFFborder-left、1pxsolid#FFFFFFborder-bottom、1pxsolid#FFFFFFline-height、1px}.modbc{background-color、#FFFFFFborder-bottom、1pxsolid#FFFFFFline-height、1px}.modbr{background-color、#FFFFFFborder-right、1pxsolid#FFFFFFborder-bottom、1pxsolid#FFFFFFline-height、1px}Ω我的小屋、http、//hi.baidu.com/823xu欢迎来做客！。