精华内容
下载资源
问答
  • 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实现背景透明,文字不透明是可取的。

    展开全文
  • 如何设置背景透明度

    千次阅读 2018-09-17 20:15:25
    设置背景透明度分为两种:一种背景为颜色设置的纯色背景;另一种是图片做背景。 【情况一】纯色背景 关键代码:background:rgba(R,G,B,A) RGB--------三原色(red,green,bule) A-------透明度 关于三原色最终...

    设置背景透明度分为两种:一种背景为颜色设置的纯色背景;另一种是图片做背景。

    【情况一】纯色背景

    关键代码:background:rgba(R,G,B,A)

    • RGB--------三原色(red,green,bule)
    • A-------透明度

    关于三原色最终成型的颜色,可以用画图软件进行参考。

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>示例代码一</title>
        <style>
            div { width:200px; height: 200px; }
        </style>
    </head>
    <body>
    <div style="background-color: green"></div>
    <hr>
    <div style="background-color:rgba(0,255,0,0.5)"></div>
    </body>
    </html>

    示例输出:


    【情况二】图片背景

    关键代码:filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;

    • filter:alpha(opacity=60); /*支持 IE 浏览器*/
    • -moz-opacity:0.60; /*支持 FireFox 浏览器*/
    • opacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/

    示例代码一:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>示例代码二</title>
    </head>
    <body style="background-image: url('qinghua.jpg');background-repeat: no-repeat">
    </body>
    </html>

    示例输出一:

     示例代码二:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>示例代码二</title>
        <style>
            .book{
                width: 100%;
                filter:alpha(opacity=40);
                -moz-opacity: 0.4;
                opacity: 0.4;
                background: url("qinghua.jpg");
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
    <div class="book">
        <h1>我爱学习</h1>
        <h1>学习爱我</h1>
        <h1>沉迷学习</h1>
        <h1>无法自拔</h1>
    </div>
    </body>
    </html>

    示例输出二:

    注意:当针对图像背景修改透明度时,需结合div一起使用。 在背景图片颜色变淡的同时,背景上的文本字的颜色也会随之变淡。

    展开全文
  • html中如何设置背景背景颜色的透明度

    html中如何设置背景和背景颜色的透明度


           html中设置背景和背景颜色的透明度有两种方式:

           1.通过rgba方式设置

            例如: background:rgba(0,0,0,.5);

            优点:可对任意颜色设置透明度

            缺点:存在兼容性问题:针对IE9以下浏览器不兼容

           2.通过backgroud和opacity设置

            例如:background:#000000;

                       opacity:0.6;

            优点:兼容性好

            缺点:只针对于背景颜色设置透明度。


    展开全文
  • HTML背景颜色及透明度设置

    万次阅读 2017-07-10 16:51:35
    初学HTML,在学习的过程中偶然发现了背景颜色透明度的设置方法挺有趣,顺便把颜色的设置方法复习总结一下 设置背景颜色有三种方法,分别是:sRGB,十六进制和颜色名; 十六进制: text RGB: text ...

    初学HTML,在学习的过程中偶然发现了背景颜色透明度的设置方法挺有趣,顺便把颜色的设置方法复习总结一下


    设置背景颜色有三种方法,分别是:sRGB,十六进制和颜色名;


    十六进制:

    <p style="background-color:#FFFF00">
    text
    </p>

    RGB:

    <p style="background-color:rgb(255,55,155)">
    text
    </p>

    颜色名:(如:yellow,lightred,black等等)

    <p style="background-color:lightblue">
    text
    </p>


    用RGB值法还可以设置背景颜色的透明度,我一般把它用于调整颜色的浓淡,比起改RGB值或是十六进制来说要便利很多

    <p style="background-color:rgba(255,55,155,0.8)">
    text
    </p>

    background-color后面用rgba取代rgb,a指的是透明度,范围是从0到1,即括号内的第四个值


    斯在web方面的学习刚刚开始,如有谬误之处还望不吝赐教




    展开全文
  • 我想给整个页面做个半透明背景 HTML+CSS+JS 求教
  • 背景透明度如何设置一个div的背景透明度 来源:互联网 作者:佚名 时间:12-31 16:55:48 【大 中小】 如何设置一个div的背景透明度,对于一些新手朋友有些陌生,接下来详细介绍实现方法,有需要了解的朋友可以...
  • 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
  • HTML文件代码 <!DOCTYPE html> <html> <head> <head> <body "> <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%"> <img src=...
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。...width:100%}注:代码应用的式CSS中的Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从...
  • Openlayers地图背景透明度设置

    千次阅读 2018-07-10 18:03:19
    在实际开发中,为了美观,需要设置Openlayers中地图div中除了地图之外的地方的透明度,这个通过设置.ol-viewport的样式就可以完成。项目测试代码如下:&lt;!DOCTYPE html&gt; &lt;html&gt; &...
  • HTML背景图片透明度设置

    万次阅读 2017-12-18 20:11:45
    html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> title>无标题文档title> style type="text/css"> .STYLE5 {color: #000000} ....
  • Android 背景透明度

    2019-07-21 02:08:20
    颜色和不透明度(alpha)值以十六进制表示法表示。任何一种颜色的值范围都是0到255(00到ff)。对于alpha,00表示完全透明,ff表示完全不透明。表达式顺序是“aabbggrr”,其中“aa=alpha”(00到ff);“bb=blue”...
  • 思路1顶部导航条的背景透明度随着 滚动条滚动的像素 增加或者减少 思路2只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果问题1顶部导航条要使用2层DIV叠加 1层为内容层 1层为作为...
  • CSS控制网页的背景透明度

    万次阅读 2018-06-02 20:02:30
    1.实现方法(3种),以不透明度为50%为例 ①CSS3的opacity:X X的取值范围:0~1 如:opacity:0.5; ②CSS3的rgba(red,green,blue,alpha) alpha的取值范围:0~1 如:background:rgba(255,255,255,0.5); ③IE专属...
  • Html 层级 透明度 背景图片

    千次阅读 2019-01-23 16:01:08
     * 透明度,需要一个0-100之间的值  * 0 表示完全透明  * 100 表示完全不透明  * 50 半透明  *   * 这种方式支持IE6,但是这种效果在IE Tester中无法测试 背景设置图片  * 使用background-image...
  • web中html+CSS修改背景图片的不透明度

    千次阅读 2020-05-04 21:37:15
    在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div...
  • // 背景透明度渐变动画 ObjectAnimator alpha = ObjectAnimator.ofFloat(button, "alpha", 0, 1); alpha.setDuration(1000); alpha.start(); 转载于:https://www.cnblogs.com/lsl8966/p...
  • html设置背景图适应屏幕大小及透明度 <body style="background-image: url(../static/img/3.png);background-position: center;background-repeat: no-repeat;background-size: cover;background-attachment: ...
  • Android之使用参数改变ProgressDialog的位置、大小、背景透明度、屏幕透明度 2015-02-28 23:39 3662人阅读 评论(0) 收藏 举报  分类: Android开发之路(68)  版权声明:本文为博主...
  • DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title></title> 6 ...
  • 关于设置背景图片的透明度html+css)

    万次阅读 多人点赞 2018-03-22 16:58:24
    2018.3.22设置背景图片的透明度,而不是颜色这种,是图片显示这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了&lt;body&gt;里面是不能直接设置图片的透明度的需要借助&lt;div&...
  • 1.通过rgba方式设置 例如: background:rgba(0,0,0,.5); 优点:可对任意颜色设置透明度 缺点:存在兼容性问题:针对IE9以下浏览器不兼容 2.通过backgroud和opacity设置 ...缺点:只针对于背景颜色设置透明度。 ...
  • 背景图片是 <body background="Background_1280x1024.jpg" ; > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &...
  • div 背景颜色透明度设置

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

    万次阅读 2018-03-03 21:54:54
    今天看视频最后作业是 设置一个盒子(div) 然后让背景透明 我当时就很单纯的用opacity:0.5;(0是全透明 1是完全不透明)然后发现 我的妈!!! 全部都透明了 我较劲脑子想出来的一首诗竟然也透明了!!!后来我就...
  • 关于div设置背景颜色透明度

    千次阅读 2014-06-11 14:32:45
    通常我们通过div的style样式属性filter来设置div的背景透明样式。可根据alpha提供的如下参数进行组合控制: filter: Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity ...
  • 背景图片设置透明度而不改变内容

    千次阅读 2019-05-07 12:13:19
    想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话,会...把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div不设置 <view class='item'> <image cla...
  • js实现鼠标滑入滑出背景透明度改变

    千次阅读 2015-12-20 23:36:32
    js实现鼠标滑入滑出背景透明度改变 <!DOCTYPE html> <html lang="en"> 分享 body{padding:0;margin:0;} #n_content{width:200px;heigh
  • css设置遮罩层背景颜色透明度渐变

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,771
精华内容 27,108
关键字:

html背景透明度