精华内容
下载资源
问答
  • 图片作为CSS背景时,如何设置背景图片透明度,让背景图片半透明。纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。方法一:直接编辑图片直接将图片在图片编辑软件中(比如PS)编辑...

    图片作为CSS背景时,如何设置背景图片透明度,让背景图片半透明。纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。

    方法一:直接编辑图片

    直接将图片在图片编辑软件中(比如PS)编辑出自己想要的半透明效果。

    方法二:利用CSS滤镜

    filter设置图片背景半透明效果,缺点为图片及文字都会出现半透明效果。

    1、对应设置半透明CSS代码:

    filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;

    2、解释代码:

    filter:alpha(opacity=50); /*支持 IE 浏览器*/

    -moz-opacity:0.50; /*支持 FireFox 浏览器*/

    opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/

    3、实例HTML CSS代码

    filter滤镜设置半透明效果 CSS5

    body{ font-size:16px}

    .book,.book-a{ border:2px solid #333}

    .book{ width:300px; height:100px; background:url(logo.gif)}

    .book-a{ width:300px; height:100px;

    filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60; background:url(logo.gif)}

    学习css在CSS5解决问题和学习不错
    学习css在CSS5解决问题和学习不错

    以上代码可直接拷贝下来,保存HTML后,浏览器测试看看效果。

    4、效果截图

    b0406804591720ef6d1bba42c3fa3b23.png

    CSS滤镜实现半透明

    5、说明

    优点直接对设置背景图片的DIV对象设置半透明滤镜,非常方便。

    缺点,对象内文字内容、边框均跟随实现半透明。

    方法三:纯颜色半透明遮挡【CSS5强烈推荐】

    此方法浏览器兼容性好,图片和内容都能很好分离实现背景图片半透明效果,而文字、边框等样式与内容不受影响。只是多了一层DIV,使用绝对定位样式来实现重叠层叠。

    1、关键代码

    1)、background:rgba(255,255,255,.4)

    设置背景颜色值与透明度。前3个255为代表RGB黑色,.4代表透明度为40%

    这个颜色值可以从PS软件获得。

    63cd33274616251b02b1a655a12bbc0c.png

    这里不再介绍,PS软件获取颜色,根据以上演示图可简单获得【PS获取RGB数值】

    2)、绝对定位

    position:relative、position:absolute; left:0; top:0;

    设置绝对定位让文字DIV放到背景DIV上。

    3)、完整实例代码

    背景图片透明度设置实例_CSS5

    .btmbox{ width:300px; height:100px; background:url(logo.gif)}

    .btmbox-b{ width:300px; height:100px; background:url(logo.gif); position:relative}

    .btmbox-b .qb{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.4);}

    .btmbox-b .qc{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.8);}

    测试半透明案例内容文字
    测试半透明案例内容文字
    测试半透明案例内容文字

    4)、图片背景截图

    195bf12ab1ece733697f729fdfb499f1.png

    设置背景图片和文字层,用文字DIV背景纯色半透明实现遮挡后面背景图片实现图片半透明

    作者:css5原创

    展开全文
  • CSS设置背景透明度

    万次阅读 多人点赞 2018-04-16 09:05:53
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...

    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:

    css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8

    css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)

    IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)

    一、css3的opacity

    兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

    使用说明:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>背景透明度</title>
    <style>
    .demo{
      padding: 25px;
      background-color:#000000;
      filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
    }
    .demo p{
        color: #FFFFFF;
    }
    </style>
    </head>
    <body>    
    
    <div class="demo">
        <p>背景透明,文字也透明</p>
    </div>
    </body>
    </html>

    使用opacity后整个模块都透明了,展现如下:

    那么使用opacity实现《背景透明,文字不透明》是不可取的。

    二、css3的rgba

    所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。

     

    background:rgba(200, 54, 54, 0.5);
    

    其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。

    兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

    解决IE8浏览器不支持rgba的方法:

     

    background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

    使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>css3的rgba</title>
    <style>
    .demo{
      padding: 25px;
      background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
      background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */
    }
    .demo p{
        color: #FFFFFF;
    }
    </style>
    </head>
    <body>    
    <div class="demo">
        <p>背景透明,文字也透明</p>
    </div>
    </body>
    </html>

    在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,展现如下:

    那么使用rgba实现背景透明,文字不透明是可取的。

    展开全文
  • div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!...

    我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。

    .modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto

    !important;width:100%}

    注:

    代码应用的式CSS中的Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下:

    {filter:alpha(opacity=#opacity,finishopacity=#finishopacity,

    style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

    具体参数含义如下:

    “opacity”表示透明度调节,范围在0-100,0表示完全透明,100表示完全不透明。

    “finishopacity” 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到

    100。

    “style” 指定透明区域的形状特征:0 代表统一形状,1

    代表线形,2 代表放射状,3 代表矩形

    “startx” 渐变透明效果开始处的 X坐标。

    “starty” 渐变透明效果开始处的 Y坐标。

    “finishx” 渐变透明效果结束处的 X坐标。

    “finishy” 渐变透明效果结束处的 Y坐标。

    以上的参数可以选用,可以只设置一个opacity

    如果设置成下面代码,就表示背景式半透明的:

    {filter:alpha(opacity=50)}

    展开全文
  • css修改背景透明度

    2019-10-09 19:10:10
    css修改背景透明度background-color:rgba(255,255,255,0.0); 修改透明度有很多方法,我这里使用的css background的rgba <div style='width:300px;height: 300px;margin-left: 41%;background: rgba(255,255,255,...

    css修改背景透明度background-color:rgba(255,255,255,0.0);

    修改透明度有很多方法,我这里使用的css background的rgba

    <div style='width:300px;height: 300px;margin-left: 41%;background: rgba(255,255,255,0.7);'>
    	<h2 style="margin-bottom: 20px;">用户登录</h2>
    	<Form action="../view/index.vue" ref="loginForm" :model="form":label-width="60">
    		<FormItem label ="用户名:">
    			<Input v-model="form.username" placeholder="请输入用户名" />
    		</FormItem>
    		<FormItem label="密码:">
    			<Input type="password" v-model="form.password" placeholder="请输入用户名" />
    		</FormItem>
    	</Form>
    	<Button type="info" @click="onLogin" style="width:250px;height:40px;">登录</Button>
    </div>
    

    rgba(255,255,255,0.7):前三个参数是颜色值(0到255,全是0为黑色,全是255为白色),第四个是透明度(0到1,0是全透明,1是不透明),只调整背景的透明度

    展开全文
  • css背景透明度

    2015-02-05 13:04:33
    css元素设置透明度,1:opacity:0.5,此方法可以设置透明度,但是在此里面的元素都跟着有了透明度了,2:background-color:rgba(243, 243, 243, 0.75);最后一个参数即为透明度
  • CSS改变图片透明度的代码 .highlightit img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=45); -moz-opacity: 0.5; } .highlightit:hover img{ filter:progid:DXImageTransform.Microsoft....
  • H5 css3背景透明度

    2019-05-07 19:14:00
    背景透明度 Opacity:0-1; 标准浏览器的写法,内容字体跟着一起有透明度。 Background:rgba(255,2,2,.3) 标准浏览器拥有的,但是元素内容不跟着一起透明。 在ie8一下 透明度的写法 filter:alpha(opacity=30); ...
  • 本篇文章就来给大家介绍一下css设置背景颜色透明的方法。 在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。 下面我们就来分别看看css中这两种方法实现背景颜色...
  • 我想给整个页面做个半透明背景 HTML+CSS+JS 求教
  • 关于调整透明度,实现透明的css方法如下: css3的opacity:x属性。x的取值为0到1, opacity:0.5表示不透明度为50%; css3的rgba(red,green,blue,alpha),alpha的取值为0到1,也是来表示透明度的。 -------可以实现...
  • web中html+CSS修改背景图片的不透明度

    千次阅读 2020-05-04 21:37:15
    在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div...
  • css实现背景图片透明

    万次阅读 2019-02-14 13:29:29
    背景色,实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255...
  • 小程序设置page背景图片透明度

    千次阅读 2019-05-11 11:30:46
    小程序设置page背景图片透明度: css代码: page{ width:100%; height:100%; } .main{ width:100%; height:100%; opacity: 0.5; background-repeat: round; background-size: contain; } .main::b...
  • css 设置背景图片透明

    千次阅读 2019-06-24 17:44:00
    背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ 转载于:https://www.cnblogs.com/jiangfeilong/p/11078431.html...
  • 关于设置背景图片透明度(html+css

    万次阅读 多人点赞 2018-03-22 16:58:24
    2018.3.22设置背景图片透明度,而不是颜色这种,是图片显示这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了&lt;body&gt;里面是不能直接设置图片的透明度的需要借助&lt;div&...
  • 以往我们实现半透明的背景都是采用rgba的方式设置的,这种方法只能设置纯色,不能使用图片,今天我们来学习下利用css来给背景图片设置透明度css怎么设置背景图片透明度?设置背景图片透明度,而不是颜色,就...
  • CSS控制网页的背景透明度

    万次阅读 2018-06-02 20:02:30
    1.实现方法(3种),以不透明度为50%为例 ①CSS3的opacity:X X的取值范围:0~1 如:opacity:0.5; ②CSS3的rgba(red,green,blue,alpha) alpha的取值范围:0~1 如:background:rgba(255,255,255,0.5); ③IE专属...
  • (转)如果需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。 .modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 注:...
  • 由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example 1 .classname { 2 /* RGBa, 透明度0.6 */ 3 background: rgba(0, 0, 0, 0.6); 4 } ...
  • 背景透明,文字不透明全兼容方案测试浏览器: VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、oper
  • 如何只改变父元素背景透明度不改变子元素透明度
  • css背景透明,文字不透明

    千次阅读 2019-01-23 18:48:22
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8...
  • 满意答案xiayuwap推荐于 2017.12.15采纳率:51%等级:8已帮助:959人可以设置啊,如图:常见的失败做法最常见的做法...还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。正确Action:登陆bod...
  • css三种图片格式比较及背景透明度图片:jpg特点:可压缩,色彩丰富,压缩后图形变模糊,但保存大小会变小。缺点:不能保存图层,不支持透明和动图。png特点: 能够保存图层,支持透明和半透明缺点: 不能压缩,如果...
  • css背景图片加上半透明背景颜色

    千次阅读 2017-04-26 18:57:00
    背景图片加上半透明背景颜色 background: rgba(0, 0, 0, .6) url(../../images/pro-bg.png) no-repeat center center; 转载于:https://www.cnblogs.com/silences/p/6770210.html
  • CSS实现背景图片透明和文字不透明效果

    万次阅读 多人点赞 2018-11-20 16:34:17
    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{  width: 500px;  height: ...
  • 最近做一个项目,调图片透明度问题,在这记录一下。如果我们不想让子元素继承父元素的opacity属性。 class="parent"> class="child"> ` 如果我们在css文件中,令parent类的opacity设置为0.5。那么,...
  • css背景透明

    万次阅读 2019-04-15 17:35:00
    css设置div背景透明有两种方法:第一种使用opacity:0~1,这个方法有个缺点,就是内容也会跟着透明;第二种方法就是background-color:rgba(0,0,0,0~1),使用这个方法就只会设置div背景透明,而不会影响到div里的内容...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,446
精华内容 12,978
关键字:

css背景图片透明度