精华内容
下载资源
问答
  • 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设置背景透明度

    2018-12-19 17:25:55
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...背景透明度&lt;/title&gt; &lt;style&gt; .demo{ padding: 25px; background-color:#000000; /*filter:alpha
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>背景透明度</title>
    <style>
    .demo{
      padding: 25px;
    background-color:#000000;
     /*filter:alpha(opacity)方法支持ie8及以上,加上zoom:1也可支持ie8及以下*/
    	filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
    
    /*解决ie8及以下透明问题,ie6、ie7下必须写上zoom:1*/
    	/*filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);*/
    	/*background-color不支持ie8及以下,若要兼容ie8以下,必须加上上面一句*/
    	/*background-color:rgba(0,0,0,0.5);*/
    	/*zoom:1 ie8以下有些样式不能显示,启动后可以显示*/
    	zoom: 1;
    }
    :root.deno {
    	filter: none; /* IE9下需要关闭滤镜,否则会与背景色同时生效 */
    }
    .demo p{
        color: red;
    }
    </style>
    </head>
    <body>    
     
    <div class="demo">
        <p>背景透明,文字也透明</p>
    </div>
    </body>
    </html>
    
    展开全文
  • 由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example 1 .classname { 2 /* RGBa, 透明度0.6 */ 3 background: rgba(0, 0, 0, 0.6); 4 } ...

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素.

    解决方法:

    1> 使用 RGBA

    Example

    1 .classname {
    2     /* RGBa, 透明度0.6 */
    3     background: rgba(0, 0, 0, 0.6);
    4 }

    2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局

    Example

    1 <div class="demo">
    2     <div class="demo-bg"></div><!-- 透明背景 -->
    3     <div class="demo-txt">Content here</div><!-- 不透明文字 -->
    4 </div>

    Demo

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>opacity</title>
     6 <style>
     7 *{
     8     padding: 0;
     9     margin: 0;
    10 }
    11 body{
    12     padding: 50px;
    13     background: url(http://static.cnblogs.com/images/logo_small.gif) 0 0 repeat;
    14 }
    15  
    16 .demo{
    17     width: 200px;
    18     height: 200px;
    19     position: relative;
    20 }
    21 .demo-bg{
    22     position: absolute;
    23     left: 0;
    24     top: 0;
    25     z-index: 0;
    26     width: 200px;
    27     height: 200px;
    28     background-color:#000000;
    29     filter:Alpha(opacity=50);
    30     background-color: rgba(0,0,0,0.5);
    31 }
    32 .demo-txt{
    33     position: relative;
    34     z-index: 1;
    35     color: #FFFFFF;
    36 }
    37 </style>
    38 </head>
    39 <body>   
    40  
    41 <div class="demo">
    42     <div class="demo-bg"></div><!-- 透明背景 -->
    43     <div class="demo-txt">Content here</div><!-- 不透明文字 -->
    44 </div>
    45  
    46 </html>
    View Code

    3> 建立一个24位PNG背景图片

    不推荐,IE下24位PNG图透明时引起的内存泄漏.

    SEE ALSO

    CSS实现背景透明完美解决方案
    CSS实现背景透明,文字不透明,兼容所有浏览器

    转载于:https://www.cnblogs.com/hzj680539/p/5098042.html

    展开全文
  • 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设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。下面我们就来分别看看css中这两种方法实现背景颜色透明的具体实例1、通过backgroud和opacity设置背景...
  • css设置背景颜色透明度只需要使用rgba(R,G,B,A)即可。A为透明度参数,取值在0~1之间,不可为负值。 下面是学习啦小编给大家整理的一些有关css设置背景颜色透明度的方法,希望对大家有帮助!css设置背景颜色透明度的...
  • 背景透明度 1.设置透明背景色rgba background-color:rgba(220,38,38,0.2); 2.通过opacity属性改变透明度 background: #43bff5; opacity:0.2; 背景色透明 background: transparent;
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。...width:100%}注:代码应用的式CSS中的Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从...
  • H5 css3背景透明度

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

    千次阅读 2019-07-02 15:23:25
    CSS设置background背景透明 background: transparent;
  • 解决css设置背景透明,文字不透明

    千次阅读 2015-01-05 19:29:09
    解决css设置背景透明,文字不透明 设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标签设置背景的透明度...
  • css添加背景透明度

    2020-01-07 16:14:53
    如果直接在css中添加opacity 整个页面的透明度都会变,后来借鉴到网上案例, 通过伪元素来添加完美解决。 .home { height: 800px; display: flex; flex-direction: column; flex: 110%; .header_q { z-index: ...
  • 我想给整个页面做个半透明背景 HTML+CSS+JS 求教
  • CSS 背景透明度

    2014-02-17 17:21:07
    eg: //设定背景透明度   $(".divQuickQueryShadow").css({ 'opacity': '0.70' });
  • css背景透明度

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

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

    千次阅读 2020-08-25 14:34:53
    css设置遮罩层背景颜色透明度渐变 css代码 background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
  • 在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望...
  • CSS设置背景透明字体不透明

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

    千次阅读 2016-06-29 19:04:20
    HTML 使用CSS 设置透明度Opacity HTML 使用CSS 设置透明度Opacity Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法。 第一种是...
  • CSS设置透明度

    千次阅读 2016-11-08 16:35:13
    div{ filter: alpha(opacity=50); -moz-opacity: .5;...}下面是我用到的一个例子,最终效果为:这里底部的小条就是透明的,其样式为: .ck-slideBox { position: absolute; bottom: 0; left: 0;
  • 关于调整透明度,实现透明的css方法如下: css3的opacity:x属性。x的取值为0到1, opacity:0.5表示不透明度为50%; css3的rgba(red,green,blue,alpha),alpha的取值为0到1,也是来表示透明度的。 -------可以实现...
  • 字体透明使用color,前三个是rgb的色素值,后面是字体的透明度0-1 谨记:字体透明用的是color,而背景透明,字体不透明使用的是background。 示例: h5结构 背景透明,字体显示在最上面,不透明 字体是透明的
  • 一、css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了...
  • 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滤镜达到的效果,应用十分广泛。... 代码应用的式CSS中的Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,157
精华内容 16,862
关键字:

css设置背景透明度