精华内容
下载资源
问答
  • 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-09-27 23:14:16
    设置背景透明用: background-color: rgba(0, 0, 0, 0.4); 虽然opacity:0.5;也可以设置背景透明,但是会影响整体;推荐使用rgba设置背景透明,只会在当前的内容内起作用 转载于:...

    设置背景透明用:

    background-color: rgba(0, 0, 0, 0.4);
     
    虽然opacity:0.5;也可以设置背景透明,但是会影响整体;推荐使用rgba设置背景透明,只会在当前的内容内起作用
     

    转载于:https://www.cnblogs.com/phermis/p/11395227.html

    展开全文
  • 解决css设置背景透明,文字不透明

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

    解决css设置背景透明,文字不透明

    设置元素的透明度:
     -moz-opacity:0.8; /*在Firefox中设置元素透明度
     filter: alpha(opacity=80); /*ie使用滤镜设置透明
     
    但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。
     
    例如:
     <div><p>不透明</p></div>
     
    div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
     height:500px;color:#F30; font-size:32px; font-weight:bold; }
     
    可以很明显的看出文字也被半透明的,这是我们不想看到的效果。
     以前我曾经是绝对定位的方法解决这个问题,也就是现在的p并不是div的子元素。
     
    <div></div>
     <p>不透明</p>
     
    这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
     但是很多时候这样的标签并不是很合理,有可能还会多浪费几个标签。
     
    下面的这种方法就可以解决上面的问题了:
     div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/
    background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/ 
     width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
     div p{ position:relative;}/*实现IE文字不透明*/
     
    火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了,但是ie还不是能很好的支持。
     所以我们给不想被透明的标签设置一个定位属性,问题接能解决了。
     
    文字来自:http://blog.163.com/l_lihanyu/blog/static/12003272320123185372127/

    展开全文
  • 实际展示效果图如下 1、背景透明,字体不透明的是第一个divNotOpacity 样式:background: rgba(0, 0, 0, 0.7); 前三个是rgb的色素值,最后的是背景色的透明度(0-1) 2、字体透明divOpacity 样式:color:rgba(255,...

    实际展示效果图如下

     

    1、背景透明,字体不透明的是第一个divNotOpacity

    样式:background: rgba(0, 0, 0, 0.7);

    前三个是rgb的色素值,最后的是背景色的透明度(0-1)

    2、字体透明divOpacity

    样式:color:rgba(255,255,255,0.5);

    字体透明使用color,前三个是rgb的色素值,后面是字体的透明度0-1

    谨记:字体透明用的是color,而背景透明,字体不透明使用的是background

    示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>h5结构</title>
        <style type="text/css">
            .divNotOpacity{
                left: 200px;
                top: 200px; 
                position: absolute;/* 绝对定位 */
                /* 以下为本身div的样式 */
                height: 50px;
                width: 400px;
                bottom: 0;
                color: #ffffff;
                background: rgba(0, 0, 0, 0.7); /* 背景透明,字体不透明(前三个值为rgb色素,后面的值为背景的透明度0-1) */    
                display: flex;/* 设置为弹性布局 */
                justify-content: space-around;/* 内容左右居中显示 */
                align-items: center; /* 内容上下居中显示 */
            }
            .divOpacity{
                left: 200px;
                top: 300px;
                position: absolute;/* 绝对定位 */
                /* 以下为本身div的样式 */
                height: 50px;
                width: 400px;
                background:black;
                color:rgba(255,255,255,0.5); /* 字体透明使用color,前三个是rgb,后面是字体的透明度0-1 */
                display: flex;/* 设置为弹性布局 */
                justify-content: space-around;/* 内容左右居中显示 */
                align-items: center; /* 内容上下居中显示 */
            }
        </style>
    </head>
    <body>
        <div class="divNotOpacity">
            背景透明,字体显示在最上面,不透明
        </div>
        <div class="divOpacity">
            字体是透明的
        </div>
    </body>
    </html>
    展开全文
  • CSS设置背景透明,文字不透明。

    千次阅读 2017-01-20 18:01:03
    background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)都会读懂 */ 参考:http://www.cnblogs.com/PeunZhang/p/4089894.html
  • css设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。下面我们就来分别看看css中这两种方法实现背景颜色透明的具体实例1、通过backgroud和opacity设置背景...
  • 本篇文章就来给大家介绍一下css设置背景颜色透明的方法。 在css设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。 下面我们就来分别看看css中这两种方法实现背景颜色...
  • CSS设置background背景透明

    千次阅读 2019-07-02 15:23:25
    CSS设置background背景透明 background: transparent;
  • 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设置背景透明字体不透明

    千次阅读 2020-03-18 22:10:45
    CSS怎么设置背景透明字体不透明 最近在学习.NET web应用开发,学习HTML静态页面时想做一个半透明背景色,像以下效果: 发现用opacity设置背景颜色透明度时连同其div内所有图片及其字体颜色都变透明了。 opacity...
  • CSS设置背景透明

    千次阅读 2017-02-16 10:51:36
    为关键代码,当opacity值为1时,表示完全不透明,为0时表示完全透明。 其关的属性介绍如下: opacity: 0.3 ;这是“最重要的”,因为它是在CSS的现行标准。这将在Firefox,Safari和Opera的大多数版本的...
  • 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...
  • 设置背景透明,文字不透明效果 一、常见的错误做法 最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果。 2.设置background-color:rgba(),这种方式只能...
  • CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: background-image:url("图片路径") 小技巧:提倡背景图片后边的地址,...
  • 使用css 设置图片背景透明,文字不透明
  • CSS设置背景颜色为透明

    千次阅读 2020-01-17 15:49:30
    background-color:transparent;
  • css 设置背景色为透明

    千次阅读 2019-10-22 15:23:23
    background: transparent; /*完全透明*/ opacity: 0.7; /*整个按钮的不透明度,会影响到文字,0完全... /* 仅调节背景的色彩,并加上不透明度,此例为70%不透明的白色 */ 转发地址:https://segmentfault.com/q...
  • css背景透明

    千次阅读 2018-10-13 22:44:31
    css3中当北京需要透明的时候用的是rgba, 如 background:rgba(0,0,0,.3) 其中前面三个数字是rgb中的三个数字,合起来代表的是颜色,最后一个数字代表的是透明度,他的值是从​​​​0-1的,其中1是代表一点都...
  • CSS背景颜色设置透明

    2020-12-25 10:38:31
    CSS背景颜色设置透明方式,例如:background: rgb(250,0,26,0.5);
  • css实现背景透明文字不透明

    万次阅读 2017-10-15 13:29:26
    我们所说的设置透明度实际上是设置透明度使用opacity会导致背景和图片都透明,在此处不合适<!DOCTYPE html> <title>css3的rgba *{ padding: 0; margin: 0; } body{ padding: 50px; } .demo
  • css背景透明

    万次阅读 2019-04-15 17:35:00
    css设置div背景透明有两种方法:第一种使用opacity:0~1,这个方法有个缺点,就是内容也会跟着透明;第二种方法就是background-color:rgba(0,0,0,0~1),使用这个方法就只会设置div背景透明,而不会影响到div里的内容...
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!...
  • css实现背景透明,内容不透明

    万次阅读 2018-08-14 19:37:13
    css实现背景和文字均为黑色,背景透明度为0.2,文字不透明: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta ...
  • css 文本背景透明Introduction: 介绍: In web development, there are numerous ways by which we can style our websites or web pages. You can make use of lots of properties for creating attractive and...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,034
精华内容 22,813
关键字:

css设置背景透明