精华内容
下载资源
问答
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的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设置背景颜色透明的方法。 在css设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。 下面我们就来分别看看css中这两种方法实现背景颜色...

    在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法。

    在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。

    下面我们就来分别看看css中这两种方法实现背景颜色透明的具体实例

    1、通过backgroud和opacity设置背景颜色透明

    background属性中属性值比较简单,这里就不细说了,我们在这里来简单看看opacity属性

    opacity属性参数的"不透明度"是以数字表示,从 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是 1.0,换句话说,数字越大代表元素越不透明。参数除了可以使用"不透明度"之外,还有 inherit 继承父层属性,不过浏览器支援度较差,不建议使用。

    看完了对于两种属性的介绍,下面我们就来看通过backgroud和opacity设置背景颜色透明度的具体实例

    代码如下:

    <div class="box"></div>
    
    
    .box{
     width:300px; 
     height:200px; 
     margin:0 auto; 
     border:1px solid #ccc; 
     background:red; 
     opacity:0.2;  
    }
    

    背景颜色透明效果如下:
    在这里插入图片描述
    说明:通过backgroud和opacity设置背景颜色透明度,如果背景上面有文字的话,那么文字也会变成透明,就像下面的效果
    在这里插入图片描述
    所以要看情况来使用这种方法来设置背景颜色透明。

    2、通过rgba方式设置背景颜色透明

    所谓RGBA颜色,就是RGB三原色加ALPHA。在给背景添加颜色的同时,提供透明度特性。

    用法:background:rgba(R,G, B, A);

    下面我们就来看通过rgba方式设置背景颜色透明度的具体实例:

    <div class="title_div">背景颜色透明</div>
    
    
    .title_div{ 
     width: 200px;
     height: 200px; 
     line-height: 30px;
     text-align: center;
     margin:0 auto;
     background-color:rgba(220,38,38,0.2);
    }
    

    rgba方式设置背景颜色透明度效果如下:
    在这里插入图片描述
    说明:通过rgba方式设置背景颜色透明度,可以设置背景颜色透明而文字不透明,但是这种方法的兼容性不好,不兼容ie浏览器

    展开全文
  • 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实现背景透明,文字不透明是可取的。

    展开全文
  • 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...

    最终效果:

    背景图片css不变,再背景图片的里层元素设置css样式即可

    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

     

    转载于:https://www.cnblogs.com/jiangfeilong/p/11078431.html

    展开全文
  • (转)如果需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。 .modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 注:...
  • div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示
  • CSS设置背景透明字体不透明

    千次阅读 2020-03-18 22:10:45
    CSS怎么设置背景色透明字体...发现用opacity设置背景颜色透明度时连同其div内所有图片及其字体颜色都变透明了。 opacity设置半透明CSS代码如下: .bodytop{ width:100%; height:100px; text-align:center; ...
  • CSS设置background背景透明

    千次阅读 2019-07-02 15:23:25
    CSS设置background背景透明 background: transparent;
  • 以往我们实现半透明的背景都是采用rgba的方式设置的,这种方法只能设置纯色,不能使用图片,今天我们来学习下利用css来给背景图片设置透明度css怎么设置背景图片透明度设置背景图片透明度,而不是颜色,就...
  • 关于设置背景图片透明度(html+css

    万次阅读 多人点赞 2018-03-22 16:58:24
    2018.3.22设置背景图片透明度,而不是颜色这种,是图片显示这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了&lt;body&gt;里面是不能直接设置图片的透明度的需要借助&lt;div&...
  • 使用css 设置图片背景透明,文字不透明
  • 小程序设置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...
  • 由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example 1 .classname { 2 /* RGBa, 透明度0.6 */ 3 background: rgba(0, 0, 0, 0.6); 4 } ...
  • 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...
  • 2.设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 二、正确做法 有两种方法,原理相同:都是要增加一个新盒子,定位到它的上面去。 1.利用伪元素::before,我们通过给伪元素添加透明背景并且定位到...
  • 满意答案xiayuwap推荐于 2017.12.15采纳率:51%等级:8已帮助:959人可以设置啊,如图:常见的失败做法最常见的做法...还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。正确Action:登陆bod...
  • web中html+CSS修改背景图片的不透明度

    千次阅读 2020-05-04 21:37:15
    在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div...
  • color要设透明度0.85,让背景图片background-image透一点出来,而且background-color的值是后端传过来的动态数据,背景颜色动态改变,UI同学给的数据全是6位HEX,需要我自己设置透明度设置透明度首先会想到用...
  • CSS实现背景图片透明和文字不透明效果

    万次阅读 多人点赞 2018-11-20 16:34:17
    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{  width: 500px;  height: ...
  • css背景透明度

    2015-02-05 13:04:33
    css元素设置透明度,1:opacity:0.5,此方法可以设置透明度,但是在此里面的元素都跟着有了透明度了,2:background-color:rgba(243, 243, 243, 0.75);最后一个参数即为透明度
  • 解决css设置背景透明,文字不透明

    千次阅读 2015-01-05 19:29:09
    解决css设置背景透明,文字不透明 设置元素的透明度: ...但是当我们对一个标签设置背景透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。   例如:  不透明   div{-moz-opacity
  • HTML 使用CSS 设置透明度Opacity

    千次阅读 2016-06-29 19:04:20
    HTML 使用CSS 设置透明度Opacity HTML 使用CSS 设置透明度Opacity Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法。 第一种是...
  • CSS实现背景图片透明,文字不透明效果的两种方法 项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite...
  • H5 css3背景透明度

    2019-05-07 19:14:00
    背景透明度 Opacity:0-1; 标准浏览器的写法,内容字体跟着一起有透明度。 Background:rgba(255,2,2,.3) 标准浏览器拥有的,但是元素内容不跟着一起透明。 在ie8一下 透明度的写法 filter:alpha(opacity=30); ...
  • 背景图片设置透明度而不改变内容

    千次阅读 2019-05-07 12:13:19
    那么如何实现只让背景图片透明呢? 方法一 弄一个透明的背景图片哈哈哈哈 方法二 把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div不设置 <view class='item'> <...
  • 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果...
  • 最近做一个项目,调图片透明度问题,在这记录一下。如果我们不想让子元素继承父元素的opacity属性。 class="parent"> class="child"> ` 如果我们在css文件中,令parent类的opacity设置为0.5。那么,...
  • 我想给整个页面做个半透明背景 HTML+CSS+JS 求教
  • 【前端】CSS实现背景图片透明和文字不透明效果

    万次阅读 多人点赞 2017-06-20 09:57:52
    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: ...
  • 背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ background: url(http://csssecrets.io/images/tiger.j...

空空如也

空空如也

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

css设置背景图片透明度