精华内容
下载资源
问答
  • CSS背景颜色透明度兼容

    千次阅读 2019-03-25 10:21:00
    chrome( 73.0.3683.86)和Firefox(66.0.1 )中调试 rgb(255,255,255,0.1) 可以只使背景透明 360浏览器,IE11,IE6、7、8 均不行 360浏览器获取与当前IE同版本的内核,所以调好IE即可。 IE11中设置rgba(255,255,255...

    chrome( 73.0.3683.86)和Firefox(66.0.1 )中调试 rgb(255,255,255,0.1) 可以只使背景色透明

    360浏览器,IE11,IE6、7、8 均不行

    360浏览器获取与当前IE同版本的内核,所以调好IE即可。

    IE11中设置rgba(255,255,255,0.8)即可

    IE6、7、8 中用IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)
    设置
    *zoom:1;( 激活IE6、7的haslayout属性,让它读懂Alpha )
    filter:Alpha(opacity=50);( 只支持IE6、7、8、9 )

    PS:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8(会使整体透明)

    参考

    展开全文
  • div css 背景颜色透明度设置

    千次阅读 2015-05-23 21:47:07
    想要设置某个div中的背景颜色透明度使用 div标签的style就可以做到  比如:  方法是:rgba(参数1;参数2;参数3;参数4)  参数1~参数3:三原色(红,绿,蓝)各个颜色的取值范围为0~255,不同的搭配配置出不同的...

    想要设置某个div中的背景颜色的透明度使用 div标签的style就可以做到

        比如: <div style="background-color:rgba(255,255,255,0.2);"></div>

        方法是:rgba(参数1,参数2,参数3,参数4)

                         参数1~参数3:三原色(红,绿,蓝)各个颜色的取值范围为0~255,不同的搭配配置出不同的颜色。

                         参数4:0~1,可以出现小数,表示透明度


    初学者学习经验,希望对大家有用。祝您学习进步,生活安康!

    展开全文
  • css 设置背景颜色透明度Introduction: 介绍: Opacity is a very key feature when it comes to the appearance of your images and texts and various other elements. One should be very wise to use opacity ...

    css 设置背景颜色透明度

    Introduction:

    介绍:

    Opacity is a very key feature when it comes to the appearance of your images and texts and various other elements. One should be very wise to use opacity property. The opacity property can either be used to enhance a particular element and of used incorrectly it can also ruin the appearance of your element in your website or web page. Although, if you want to become a good developer you need to learn about as many properties as possible and opacity is definite in that list. Using opacity can help you create different options for the appearance of your element and that too in a much stylish way. So, with that note in mind why don’t we learn more about this property in the next section.

    当涉及到图像,文本和各种其他元素的外观时,不透明度是非常关键的功能。 使用不透明度属性应该是非常明智的。 opacity属性既可以用来增强特定元素,又可以不正确地使用它,也可能破坏元素在网站或网页中的外观。 虽然,如果您想成为一名优秀的开发人员,则需要了解尽可能多的属性,并且不透明度在该列表中是确定的。 使用不透明度可以帮助您以一种非常时尚的方式为元素的外观创建不同的选项。 因此,牢记这一点,为什么我们在下一节中不了解有关此属性的更多信息。

    Trivia:

    琐事:

    The opacity property is majorly used to define or set the transparency of an element on your website or web page. As you might all be aware the value of opacity lies between 0.0 to 1.0, where 0.0 value represents high transparency and on the other hand the high value represents very low transparency. If you wish to calculate the percentage of opacity you can do that by using a very simple formula that is, Opacity%=Opacity*100. Now, that you have learned about opacity to some detail why don’t we move further with the topic and start discussing how can we set the opacity only to background color and not on text using CSS.

    opacity属性主要用于定义或设置网站或网页上元素的透明度。 众所周知,不透明度值介于0.0到1.0之间 ,其中0.0值表示高透明度,而高值表示非常低的透明度。 如果要计算不透明度的百分比,可以使用一个非常简单的公式Opacity%= Opacity * 100来实现 。 现在,您已经详细了解了不透明度,为什么我们不进一步讨论该主题,并开始讨论如何使用CSS将不透明度仅设置为背景色而不设置为文本。

    Method:

    方法:

    To change the opacity of the background color and not of the text using CSS, all you gotta make use of some value and you will be able to do it in no time, those values are RGBA values. Now, the question comes in mind that when we are setting the opacity then why aren't we using opacity property? This is a very apt question in this context and the answer to that is that if you use opacity then the text inside it might get fully transparent.

    要使用CSS更改背景颜色而不是文本的不透明度 ,您所需要的全部都是一些值,并且这些值都是RGBA值 ,您将可以立即使用。 现在,我们想到的问题是,当我们设置不透明度时,为什么不使用不透明度属性呢? 在这种情况下,这是一个非常恰当的问题,答案是,如果您使用不透明度,则其中的文本可能会变得完全透明。

    Syntax:

    句法:

        random{
            background:rgba(red, green, blue, alpha);
        }
    
    

    Example:

    例:

    <!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            .div1 {
                background: rgb(255, 0, 0, 0.1);
            }
            
            .div2 {
                background: rgba(255, 0, 0, 0.2);
            }
            
            .div3 {
                background: rgba(255, 0, 0, 0.3);
            }
            
            .div4 {
                background: rgba(255, 0, 0, 0.4);
            }
            
            .div5 {
                background: rgba(255, 0, 0, 0.5);
            }
            
            .div6 {
                background: rgba(255, 0, 0, 0.6);
            }
            
            .div7 {
                background: rgba(255, 0, 0, 0.7);
            }
            
            .div8 {
                background: rgba(255, 0, 0, 0.8);
            }
            
            .div9 {
                background: rgba(255, 0, 0, 0.9);
            }
            
            .div10 {
                background: rgba(255, 0, 0, 1.0);
            }
        </style>
    </head>
    
    <body>
        <div class="div1">
            <p>10% opacity.</p>
        </div>
        <div class="div2">
            <p>20% opacity.</p>
        </div>
        <div class="div3">
            <p>30% opacity.</p>
        </div>
        <div class="div4">
            <p>40% opacity.</p>
        </div>
        <div class="div5">
            <p>50% opacity.</p>
        </div>
        <div class="div6">
            <p>60% opacity.</p>
        </div>
        <div class="div7">
            <p>70% opacity.</p>
        </div>
        <div class="div8">
            <p>80% opacity.</p>
        </div>
        <div class="div9">
            <p>90% opacity.</p>
        </div>
        <div class="div10">
            <p>100% opacity.</p>
        </div>
    </body>
    
    </html>
    </html>
    
    

    Output

    输出量

    Set the opacity only to background color and not on text using CSS

    In the above example, all opacity percent is applied to the same color.

    在上面的示例中,所有不透明度百分比都应用于相同的颜色。

    More points:

    更多要点:

    Now as you may know that each color in this rgba value defines the intensity of these colors. The "a" in "rgba" is an extension here that denotes alpha and alpha is used to specify the opacity for a color. The alpha value is similar to opacity property and has its range between 0.0 to 1.0.

    现在您可能已经知道,此rgba值中的每种颜色都定义了这些颜色的强度。 “ rgba”中“ a”是此处的扩展,表示alpha,而alpha用于指定颜色的不透明度。 alpha值类似于不透明度属性, 范围在0.0到1.0之间

    翻译自: https://www.includehelp.com/code-snippets/set-the-opacity-only-to-background-color-and-not-on-text-using-css.aspx

    css 设置背景颜色透明度

    展开全文
  • 本篇文章就来给大家介绍一下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设置背景颜色透明的方法。在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。下面我们就来分别看看css中这两种方法实现背景颜色...
  • css设置背景颜色透明度只需要使用rgba(R,G,B,A)即可。A为透明度参数,取值在0~1之间,不可为负值。 下面是学习啦小编给大家整理的一些有关css设置背景颜色透明度的方法,希望对大家有帮助!css设置背景颜色透明度的...
  • 本篇文章就来给大家介绍一下css设置背景颜色透明的方法。在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。下面我们就来分别看看css中这两种方法实现背景颜色...
  • 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设置遮罩层背景颜色透明度渐变

    千次阅读 2020-08-25 14:34:53
    css设置遮罩层背景颜色透明度渐变 css代码 background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
  • CSS背景颜色透明

    千次阅读 2015-03-11 11:25:58
    CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下: {filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,...
  • } 貌似不兼容IE9,由于IE9既支持filter,又支持rgba,重复导致背景重叠。最好的兼容Less代码是: //define mixin .crossbrowser-ie(@color,@alpha){ @rgba: rgba(red(@color),green(@color),blue(@color),@alpha); ...
  • 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,...
  • 在写微信小程序的时候,有个需求是按背景颜色background-color要设透明度0.85,让背景图片background-image透一点出来,而且background-color的值是后端传过来的动态数据,背景颜色动态改变,UI同学给的数据全是6位...
  • CSS背景颜色透明且渐变

    千次阅读 2020-08-28 16:53:55
    Webkit(浏览器内核) background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(137,227,253,0.9)), to(rgba(20, 63, 181, 0.9))); 效果展示: 各个参数的含义: 1.... 起始位置的颜色 5
  • CSS漂亮的盒子 - 背景颜色透明度

    千次阅读 2020-07-31 17:02:21
    在第一个例子中,我们只让背景颜色变得透明,而第二个例子用到opacity属性,让整个元素都变得透明,包含元素中含的内容。 使用opacity把一个元素设置为透明后,将无法再让其子元素变得不那么透明。 body{ ...
  • CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: background-image:url("图片路径") 小技巧:提倡背景图片后边的地址,...
  • demo.html:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"... rgba:支持透明度颜色(背景色/字体颜
  • CSS颜色透明度

    千次阅读 2019-09-30 04:32:20
    一、设置元素背景透明度 opacity可以用来设置元素背景透明度;它需要0~1之间的值 0表示完全透明(opacity:0); 1表示完全不透明(opacity:1); 0.5表示半透明(opacity:0.5); 代码演示: 1 <!...
  • H5 css3背景透明度

    2019-05-07 19:14:00
    背景透明度 Opacity:0-1; 标准浏览器的写法,内容字体跟着一起有透明度。 Background:rgba(255,2,2,.3) 标准浏览器拥有的,但是元素内容不跟着一起透明。 在ie8一下 透明度的写法 filter:alpha(opacity=30); ...
  • 背景透明度 1.设置透明背景色rgba background-color:rgba(220,38,38,0.2); 2.通过opacity属性改变透明度 background: #43bff5; opacity:0.2; 背景色透明 background: transparent;
  • css实现背景颜色透明,文字不透明

    千次阅读 2017-07-29 22:07:25
    1.背景颜色用rgba /*CSS*/ .demo{ width: 100px; height: 100px; background: rgba(255,0,0,0.5); color: #000; }这就是背景颜色为红色半透明,文字颜色为黑色不透明的div
  • 关于调整透明度,实现透明的css方法如下: css3的opacity:x属性。x的取值为0到1, opacity:0.5表示不透明度为50%; css3的rgba(red,green,blue,alpha),alpha的取值为0到1,也是来表示透明度的。 -------可以实现...
  • CSS颜色透明度 一、设置元素背景透明度 opacity可以用来设置元素背景的透明度;它需要0~1之间的值 0表示完全透明(opacity:0); 1表示完全不透明(opacity:1); 0.5表示半透明(opacity:0.5); 代码演示: 1 2 3 ...
  • https://www.o6c.com/web/2016/10/22/379.html
  • rgba(0,0,0,0)就可以是背景色完全透明 效果图如下:
  • div 背景颜色透明度设置

    千次阅读 2013-09-16 14:35:55
    div设置背景颜色透明度    通常我们通过div的style样式属性filter来设置div的背景透明样式。可根据alpha提供的如下参数进行组合控制 filter: Alpha ( enabled=bEnabled , style=...
  • css:按钮背景颜色透明

    万次阅读 2019-03-26 11:51:47
    其中 background-color:transparent; 设置按钮背景颜色透明 #btn_login{ background-color:transparent; border-style:none; }
  • CSS中设置背景颜色,可以通过两个属性:background-color属性和background属性。 // background-color属性 body { background-color: #bada55; } // background属性 body { background: #bada55; } background...
  • css 背景透明且渐变且不影响文字颜色 rgba background: linear-gradient(90deg,rgba(255,159,0,0.16), rgba(255,102,0,0.16)); 使用opacity会使得文字的颜色也变得透明
  • 本节向大家爱描述一下如何设置DIV背景颜色透明度,opacityOpacity设置或检索透明渐变的开始透明度,Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,190
精华内容 12,076
关键字:

css背景颜色透明度