精华内容
下载资源
问答
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的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设置背景透明度

    万次阅读 多人点赞 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实现背景透明,文字不透明是可取的。

    展开全文
  • color要设透明度0.85,让背景图片background-image透一点出来,而且background-color的值是后端传过来的动态数据,背景颜色动态改变,UI同学给的数据全是6位HEX,需要我自己设置透明度设置透明度首先会想到用...


    在写微信小程序的时候,有个需求是按背景颜色background-color要设透明度0.85,让背景图片background-image透一点出来,而且background-color的值是后端传过来的动态数据,背景颜色动态改变,UI同学给的数据全是6位HEX,需要我自己设置透明度。

    设置透明度首先会想到用opacity,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,我需要子元素不透明,opacity就不能用了。

    接下来讲两个实际可用性比较高的方法,以下两种方法都在chrome和微信小程序上亲测可用:

    一、 6位HEX转RGBA

    rgbaalpha值可以设透明度而不影响子元素。但是UI同学给的几百个数据都是6位hex,所以需要我自己手动把6位hex格式转成rgb格式,再加上alpha值0.85写成rgba(x, x, x, 0.85)

    其实hex转rgb就是十进制转十六进制,最简单的办法就是用JS原生的parseInt() 函数帮我们做转换。以下是MDN文档对parseInt的说明

    parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数, radix 为介于2-36之间的数。

    如果 radix 是 undefined、0或未指定的,JavaScript会假定以下情况:

    1. 如果输入的 string以 "0x"或 “0x”(一个0,后面是小写或大写的X)开头,那么radix被假定为16,字符串的其余部分被解析为十六进制数。
    2. 如果输入的 string以 “0”(0)开头, radix被假定为8(八进制)或10(十进制)。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix。
    3. 如果输入的 string 以任何其他值开头, radix 是 10 (十进制)。

    根据说明,我们有两种方式hexrgb,可以parseInt(hex.slice(x, x+2), 16); 也可以parseInt('0x'+hex.slice(x, x+2))。最后再设置0-1或者百分数的alpha值,就顺利转好rgba了,以下是完整代码:

    // 颜色格式 hex 转 rgba
    const hexToRgba = (bgColor) => {
        let color = bgColor.slice(1);   // 去掉'#'号
        let rgba = [
            parseInt('0x'+color.slice(0, 2)),
            parseInt('0x'+color.slice(2, 4)),
            parseInt('0x'+color.slice(4, 6)),
            0.85
        ];
        return 'rgba(' + rgba.toString() + ')';
    };
    

    最后的Array.prototype.toString() 函数不带参数指定分隔号,会默认用逗号分隔,正好是我们想要的。

    二、8位HEX

    要不是这个需求,我还不知道CSS Color Module Level 4标准早在2014年就推出8位hex和4位hex来支持设置alpha值,以实现hex和rgba的互转。这个办法可比6位HEX转RGBA简洁多了,先来简单解释一下:
    8位hex是在6位hex基础上加后两位来表示alpha值,00表示完全透明,ff表示完全不透明。

    8 digits
    The first 6 digits are interpreted identically to the 6-digit notation.
    The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where ‘00’ represents a fully transparent color and ‘ff’ represent a fully opaque color.
    In other words, #0000ffcc represents the same color as rgb(0 0 100% / 80%) (a slightly-transparent blue).

    同理,4位hex是在3位hex基础上加后一位来表示alpha值,0表示完全透明,f表示完全不透明。

    4 digits
    This is a shorter variant of the 8-digit notation, “expanded” in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

    比如以下三种写法表示的是同个颜色:

    .element {
      background: rgba(0, 255, 0, 0.53);		// rgba
      background: #0f08;						//4位hex
      background: #00ff0088;					//8位hex
    }
    

    以下是摘自文章8-Digit Hex Codes?的alpha值的十进制和十六进制对照表:

    Alpha % Hex Rgb 255
    100% FF 255
    95% F2 242
    90% E6 230
    85% D9 217
    80% CC 204
    75% BF 191
    70% B3 179
    65% A6 166
    60% 99 153
    55% 8C 140
    50% 80 128
    45% 73 115
    40% 66 102
    35% 59 89
    30% 4D 77
    25% 40 64
    20% 33 51
    15% 26 38
    10% 1A 26
    5% 0D 13
    0% 00 0

    根据以上表,我在6位HEX后面加上字符串D9就能轻松搞定背景颜色设置透明度85%的需求了~

    觉得有用的请点个赞,谢谢大家的观看~转载请带本文链接,谢谢!

    展开全文
  • 本篇文章就来给大家介绍一下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浏览器

    展开全文
  • 以往我们实现半透明的背景都是采用rgba的方式设置的,这种方法只能设置纯色,不能使用图片,今天我们来学习下利用css来给背景图片设置透明度css怎么设置背景图片透明度设置背景图片透明度,而不是颜色,就...
  • 背景图片设置透明度而不改变内容

    千次阅读 2019-05-07 12:13:19
    那么如何实现只让背景图片透明呢? 方法一 弄一个透明的背景图片哈哈哈哈 方法二 把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div不设置 <view class='item'> <...
  • 关于设置背景图片透明度(html+css

    万次阅读 多人点赞 2018-03-22 16:58:24
    2018.3.22设置背景图片透明度,而不是颜色这种,是图片显示这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了&lt;body&gt;里面是不能直接设置图片的透明度的需要借助&lt;div&...
  • 满意答案xiayuwap推荐于 2017.12.15采纳率:51%等级:8已帮助:959人可以设置啊,如图:常见的失败做法最常见的做法...还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。正确Action:登陆bod...
  • (转)如果需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。 .modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 注:...
  • 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...
  • div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示
  • 使用css 设置图片背景透明,文字不透明
  • CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: background-image:url("图片路径") 小技巧:提倡背景图片后边的地址,...
  • css背景透明度

    2015-02-05 13:04:33
    css元素设置透明度,1:opacity:0.5,此方法可以设置透明度,但是在此里面的元素都跟着有了透明度了,2:background-color:rgba(243, 243, 243, 0.75);最后一个参数即为透明度
  • 在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望...
  • CSS设置background背景透明

    千次阅读 2019-07-02 15:23:25
    CSS设置background背景透明 background: transparent;
  • web中html+CSS修改背景图片的不透明度

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

    千次阅读 2016-06-29 19:04:20
    HTML 使用CSS 设置透明度Opacity HTML 使用CSS 设置透明度Opacity Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法。 第一种是...
  • 小程序设置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设置背景及其背景图片1、背景颜色2、背景图片3、背景平铺4、背景图片的位置4.1、参数为方位名词4.2、参数是精确单位4.3、使用混合单位5、背景图像固定5、背景属性简写6、背景颜色半透明7、总结 通过CSS背景属性,...
  • 最近做一个项目,调图片透明度问题,在这记录一下。如果我们不想让子元素继承父元素的opacity属性。 class="parent"> class="child"> ` 如果我们在css文件中,令parent类的opacity设置为0.5。那么,...
  • CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下: {filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,...
  • 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...
  • CSS设置背景透明字体不透明

    千次阅读 2020-03-18 22:10:45
    CSS怎么设置背景色透明字体...发现用opacity设置背景颜色透明度时连同其div内所有图片及其字体颜色都变透明了。 opacity设置半透明CSS代码如下: .bodytop{ width:100%; height:100px; text-align:center; ...
  • 由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example 1 .classname { 2 /* RGBa, 透明度0.6 */ 3 background: rgba(0, 0, 0, 0.6); 4 } ...
  • 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果...
  • 关于调整透明度,实现透明的css方法如下: css3的opacity:x属性。x的取值为0到1, opacity:0.5表示不透明度为50%; css3的rgba(red,green,blue,alpha),alpha的取值为0到1,也是来表示透明度的。 -------可以实现...

空空如也

空空如也

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

css背景图片设置透明度