barriers / 阅读 / 详情

请问:怎样用CSS来设置网页背景图片的透明度?

2023-08-22 17:56:52
共2条回复
瑞瑞爱吃桃

CSS Alpha透明的相关知识。先请看如下代码:

filter:alpha(opacity=50); /* IE */

-moz-opacity:0.5; /* Moz + FF */

opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/

  简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

  从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。

  但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。

  关键在于:

background:transparent url(alpha80.png) left top repeat!important;

background:#ccc;

filter:alpha(opacity=50);

  既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后/*opacity:.5;*/的注释看看。

Chen

单纯从你的想法是做不到的,但是你可以这样:

把图片背景从原来的位置分离到一个div里面去,这个div大小和原先背景图片的尺寸一样大小,这个div设置透明度

相关推荐

opacity什么意思

你好翻译为:n.不透明性; 费解; 难懂; 模糊希望可以帮到你
2023-08-14 05:14:082

opacity什么意思

opacity名词 n.1.不透明性,不透明度 atmospheric opacity大气不透明度equivalent opacity等效不透明度; 当量不透明度2.费解;难懂;模糊
2023-08-14 05:14:181

css中如何设置透明度

background: rgba(255, 255, 255, 0.85) 0.85是透明度的百分比
2023-08-14 05:15:114

在PS的图层面板中,“不透明度”和“填充”有什么区别?

Fill就是一个对象本身的可见度,Opacity也包括了图层效果(比如投影)的可见度
2023-08-14 05:15:297

css中,如何设置前景色的透明度?

最好是用CSS3的RGBA属性,透明滤镜(filter:alpha)是IE ONLY,不建议使用
2023-08-14 05:16:205

opacity贴图怎样做

用一张黑白图片贴入opacity通道上,可以让图片某个部分显示,某个部分不显示,显示的部分是用白色的填充,不显示的部分是由黑色填充。_谝恍┨厥獬『?,某些部件的平面形状很复杂,但对其深度方面没有严格要求,或者在第三维方向上不需要非常精确。
2023-08-14 05:17:091

火狐下 如何用JS 取得CSS的 opacity值。

现在假设有这么一段代码<divid="demo"style="color:red;opacity:0.6"><!--0.0表示不透明,1.0表示完全透明--><p>一些文字</p></div>用javascript代码来获取该属性值的方法是:varopacityValue=document.getElementById("demo").style.opacity;大多数浏览器设置元素的opacity的值都是通过例子中的形式来设置的,不过IE浏览器设置透明度的方式为filter:Alpha(opacity=60);<!--0表示不透明,100表示完全透明,不接受小数-->在ie浏览器里面暂时不知道如何获取元素的透明值。我一般都是使用jQuery框架的,使用起来比较简单,也不用去考虑浏览器兼容性的问题,以下为获取元素透明值的jQuery语句:varopacityValue=$("#demo").css("opacity");建议可以到www.w3school.com.cn网站上去了解一下。
2023-08-14 05:17:161

谁能帮忙解释一下这段css什么意思

filter:alpha(opacity=70); opacity就是指透明度;建议在后面加个opacity:0.7;因为filter只IE浏览器认识,其他浏览器都支持opacity;position:absolute; top:60px; left:710px; 这是指这个层使用绝对定位,位置为离浏览器上面60px距离,左边为710px;width:85px;这个层的宽度为85个像素;height:79px;层的高度visibility:是指设置元素是否可见。而hidden属性则是隐藏超过层边框范围内的内容。
2023-08-14 05:17:243

opacity不兼容ie7,ie8怎么解决

ie9以下的版本不支持opacity属性。但是ie独特的支持filter蒙版。所以,在设置opacity透明度的时候也一起设置了filter蒙版的透明就好了。但是有个问题。filter蒙版的透明格式是filter:Alpha(Opacity=50);/*100为不透明,0为全透明*/所以你不能用animate函数去添加filter的渐变效果。应该的写法是//这样写在ie9模拟的ie7ie8下同样能得到渐变效果。没有实际的老版本ie,实际效果请自测,应该差不多$(this).animate({opacity:.5},500).css({flter:"Alpha(Opacity=50)"});//如果直接写css是没有渐变效果的$(this).css({flter:"Alpha(Opacity=50)"});
2023-08-14 05:17:331

html 透明度

CSS有优先级容器也有和纸被烧了, 纸上的字也会没一个道理想要实现你说的效果, 就用两张纸, 一张设为100% 放下边表格40% 浮在上边<div style="position:absolute;left:100;top:100;width:300px;height:200px;filter:alpha(opacity=40,style=0);z-index:2"><table border=1><tr><td width=25%> </td><td width=25%> </td><td width=25%> </td><td width=25%> </td></tr><tr><td width=25%> </td><td width=25%> </td><td width=25%> </td><td width=25%> </td></tr></table></div><div style="position:absolute;left:100;top:100;width:300px;height:200px;z-index:1;"><table cellpadding=1 cellspacing=4><tr><td width=25%>1</td><td width=25%>2</td><td width=25%>3</td><td width=25%>4</td></tr><tr><td width=25%>5</td><td width=25%>6</td><td width=25%>7</td><td width=25%>8</td></tr></table></div>
2023-08-14 05:17:443

filter: alpha(opacity=100,finishopacity=0,style=2); 具体是什么意思啊

这句是在哪里出现的?filter CSS静态滤镜样式alpha 设置图片或文字的不透明度 opacity 设置或检索透明渐变的开始透明度。取值范围为 0 - 100 。默认值为 0 ,即完全透明。 100 为完全不透明。finishOpacity 设置或检索透明渐变的结束透明度。取值范围为 0 - 100 。默认值为 0 ,即完全透明。 100 为完全不透明。style  设置或检索透明渐变的样式。0/1/2/30 默认值。整体透明度。将 Opacity 值均匀的作用于对象。1 线性渐变透明度。从由 StartX 和 StartY 决定的点,由 Opacity 决定的透明度开始,到由 FinishX 和 FinishY 决定的点,由 FinishOpacity 决定的透明度结束。2 圆形放射渐变透明度。圆形放射区域的圆心为对象的中心,圆周到与对象的边相切为止。透明渐变由圆心开始,到圆周结束。开始透明度由 Opacity 决定,结束透明度由 FinishOpacity 决定。3 矩形放射渐变透明度。由对象的边开始,到对象的中心结束。开始透明度由 Opacity 决定,结束透明度由 FinishOpacity 决定。
2023-08-14 05:18:351

javascript中怎么通过getelementById方法得到style中的opacity(透明度)的值

getElementById("objId").style.opacity 不太确定是不是这样getElementById("objId").style.filter
2023-08-14 05:18:434

css样式 给div样式opacity:0 是什么意思

div的透明度为0
2023-08-14 05:18:514

opacity; 想要是下面的文字显示出来该怎么办。 因为背景为10%不透明度,现在文字很浅看不到

单独加一个div,给他定位,然后添加透明度就能实现了
2023-08-14 05:18:591

在3D MAX中opacity贴图通道的功能

用一张黑白图片贴入opacity通道上 可以让图片某个部分显示 某个部分不显示 显示的部分是用白色的填充 不显示的部分是由黑色填充
2023-08-14 05:19:201

我用css 中的opacity 设置元素背景的透明度 后发现该元素的内容透明度也跟着变化 怎样取消该内容的透明度

写2个层 一个用来作为背景设置为透明,一个是内容模块,设置z-idnex大于背景层
2023-08-14 05:19:272

请问各位html大神,如何将如图所示的导航栏设置透明度?我只学了html和css,请教各位有简单的

直接在代码里用RGBA(0,0,0,(这里是透明度0-1))
2023-08-14 05:19:564

premiere中,设置opacity属性,不起作用。

效果没选对层吧?
2023-08-14 05:20:144

opacity设置如何让透明的部分是黑色的

css opacity不可以变成灰色的。
2023-08-14 05:20:362

css用opacity给背景图片做透明,如何不影响层内的元素

你应该把背景图片单独做一个层,让它透明,其他内容放到另一个同样大小的层内,利用绝对定位覆盖在背景层上。
2023-08-14 05:20:451

filter:alpha(opacity=80);在css里给的是那的属性

这一条代码是为了IE浏览器实现不透明度为80% 因为如果用 opacity:0.8; IE会不支持的 我也有个这模板后面有注释/*proprietary IE code */
2023-08-14 05:20:532

怎样用css用opopacity将背景色淡化但文字不淡化

这几个字必需在一个标签里才能针对该标签设置CSS背景。比如源码中是:本站主题:XXXXX宠物用品然后就可以书写如下css实现背景色:.myclass{background-color:#3597FA;}
2023-08-14 05:21:131

.NET里怎么样可以控制form1的Opacity属性?

在窗体上放一个Timer控件,然后在click时间里添加this.Opacity+=0.1,这个参数你自己设定,还有interval的属性值自己设置一下,最后别忘了把Enable属性设置为True,因为这个默认的是Flase
2023-08-14 05:21:211

在3D MAX中opacity贴图通道的功能

这是一个透明贴图 你需要两张图片 第一个是树木的图片 然后在PS把树木的部分弄成白色 其余的弄成黑色 然后在漫反射添加 第一张图 在opacity添加第二张贴图 渲染出来就是树木的样子
2023-08-14 05:21:391

css opacity继承问题,怎样不集成父级背景色透明?

两个层 <div class="text"></div><div class="bg"></div>.text, .bg { position:absolute; left:left; top:top; width:100%;}.text { color:red}.bg { opacity:.5; backgrouond:#000}
2023-08-14 05:21:472

CSS 透明度怎么设置。 filter:alpha(opacity=10); 我这句话在IE中有效 在其它的浏览器中就没效(Opera)

filter:alpha(opacity=0);moz-opacity: 0;-khtml-opacity: 0;opacity:0;
2023-08-14 05:21:554

如何将div设置为透明

在DIV的样式里面添加上下面的样式:filter:alpha(opacity=60); //60就是60%的透明度opacity:0.6; //0.6也是60%的透明度意思这2个都要写上去,不然在不同浏览器下会有兼容性问题。
2023-08-14 05:22:063

css里面怎么设置图片的透明度,代码是什么,谢谢

opacity:0.4; 这种东西随便百度啊。
2023-08-14 05:23:513

背景图片的透明度如何设置(CSS)

透明属性:火狐下opacity:(0到1之间的数字)opacity:0.5;IE下 filter:alpha(opacity:0到100之间数字)filter:alpha(opacity=50)
2023-08-14 05:24:011

为什么WPF opacity属性设置为0时窗体成黑色?

WPF窗体的外壳还是一个普通的Windows窗体,对它设置Opacity,设置的还是内部一个Surface的Opacity(其实是一个DirectX中的Surface)。楼主的需求,应该是去掉Window的边框再做。即设置AllowsTransparency="True" WindowStyle="None"然后自己画边框等等
2023-08-14 05:24:161

filter="Alpha(Opacity=60)"是什么意思啊

这是ie的alpha滤镜opacity是透明度 范围0 - 100100就是完全透明了
2023-08-14 05:24:561

前端怎么将一个div设置成透明的呢?

opacity:0; 或者 background:transparent;
2023-08-14 05:25:047

CSS里的filter:alpha(opacity=50)是什么意思?求教了,谢谢

filter:alpha(opacity=50)是IE专用的属性,因为它不支持opacity属性,为了保证浏览器的兼容性,建议使用时俩个都写。
2023-08-14 05:25:281

CSS背景颜色透明

个人建议做一个有透明度的png,然后把这个图片设置成input的背景。因为在ie里面,对于alpha滤镜,会把这个滤镜应用到对于元素及其内部所有文本上的,透明度设置得低一点还看不太出来,设置得一高,就会有各种问题了。
2023-08-14 05:25:374

求高手 filter:alpha(opacity=20);

filter:alpha(opacity=20); /* IE 浏览器支持 */ ;-moz-opacity:0.4; /* 遨游浏览器 火狐浏览器 支持 */ ;opacity: 0.4; /* 支持CSS3的浏览器(FF 1.5也支持)*/”>
2023-08-14 05:25:461

CSS怎么设置让背景颜色透明,而文字不透明

article{ background-color:rgba(0,0,0,0.8); //注意,是rgba,不是rgb !!! position:static;}article p{ color:white; position:relitave;}
2023-08-14 05:25:554

css中,怎么写背景图片的透明度?

还真没试过,你试试修改这个层的的透明度试试
2023-08-14 05:27:016

html css里设置div为50%透明,为div里面的img添加opacity:1;不透明,但显示的结果img也是透明的,

img,继承了opacity属性,这个解决方法就是position把img定位在div上。图片不能放在opacity属性的div中。不考虑老浏览器的话,改用background:rgba();实现div透明就不会出现继承的问题。
2023-08-14 05:27:184

sp的opacity不见了

在菜单栏《编辑》(类似于首选项)中设置: 点-编辑 点-设置 材质预览打开就可以啦如何做半透明呢?第一步当然就是要有相关的通道才行,颜色有颜色的通道,粗糙度有粗糙度的通道,那当然半透明也是有自己的通道的。点击下方的Channels,它会弹出一些通道可以供你选择。第二步选择相关的通道,在这里我我们选择Opacity(就是不透明度的意思)第三需要我们注意的有两点:一、我们要赋予物体材质,半透明的效果是在材质上体现出来的,我们控制的只是材质的不透明度。二、右下角的不透明度的通道必须要打开,就是亮着的状态(为了能明显看到效果我还打开了颜色通道
2023-08-14 05:27:541

CSS中设置父元素透明度不影响子元素透明度(个人笔记)

css中经常会遇到设置了父元素的透明度后,会直接影响到子元素的透明度。 例如: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。 即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。 解决方法: 为父元素设置background: rgba(0,0,0,0.5)时设置透明度,不再加opacity属性。
2023-08-14 05:28:041

-moz-opacity:.1;是什么意思

提供给mozilla firefox的css属性,用来控制透明度数值为1的话就是不透明度为100%
2023-08-14 05:28:112

css中background-color:transparent与opacity:0有什么区别

1、background-color:transparent只是将背景设成透明的,上面的文字还是可以看见的2、 opacity:0则是整个层都透明了,包括背景和里面的所有内容,内容透明的话就看不到了
2023-08-14 05:28:191

CSS中有没有哪一种颜色值是透明的?

你是说有颜色的同时也有透明度?两个办法,以红色为例。1:color:#ff0000; opacity:0.7; //0.7表示70%透明度。但是这个办法不好用。因为实际是改变整个元素的透明度,透明背景还好,但是如果有背景,背景也会跟着70%透明。2:color:rgba(255,0,0,0.7); //这种写法最好,只会改变文字的透明度,不影响元素的透明度。同理设置background-color透明度也可以这样,而不会影响元素内文字颜色。
2023-08-14 05:28:282

animation动画加opacity透明变化,在苹果手机里面会闪

……
2023-08-14 05:28:512

改变透明度在js里面怎么写呢?

这样:<script language="javascript">function hide(id){if(document.getElementById(id).filters.alpha.opacity >= 0){document.getElementById(id).filters.alpha.opacity -= 5;window.setTimeout("hide("" + id +"")", 100);}}</script>扩展资料:注意事项此外对于透明度有一点要说明一下,就是在IE中在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100;透明度可以通过opacity:value来设置,其中value=0~1.代码如下:<!DOCTYPE html><html><head><title>js动画事件</title><link href="move.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="move.js"></script></head><body><div id="div1"></div></body></html>
2023-08-14 05:29:021

在网页中透明背景的html代码是什么?

opacity: 后面的参数是0-1设置透明度
2023-08-14 05:29:163

怎样使得opacity不占位置

设置为0完全隐藏 如果想要透明渐变的效果,可以设置 0 -- 1之间的值 如 0.1、 0.2 ..... 0.9
2023-08-14 05:29:231

如何设置asp.net中Web控件是透明》??

不知道你要的是怎样的效果Enable或Visible属性设为false就可以了,你自己试下吧
2023-08-14 05:29:433

css实现png图片透明的方法

png切透明不就完了么
2023-08-14 05:29:544

CSS中设置了图片透明度怎么不起作用呀

透明度设置filter:alpha(opacity=70);opacity:0.7;
2023-08-14 05:30:173