要设置某一元素的背景为透明,在 chrome 、firefox、opera 下是这样的:

rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0~1之间。

在 ie 中一般是这样的:

filter: alpha(opacity=40);

opacity 表示透明度,它的值范围在 0~100 之间

那么如何兼容各浏览器呢?只要把它们写在一起就行了。

由于 ie 不支持 rgba,所以会忽略之。其他浏览器对于自己不支持的,一般也会忽略。

下面来个示例:

HTML 代码:

  1. aaaaa
  2. </div>
  3. </body>
  4. <div class="transparent">
  5. <div class="box">
  6. box
  7. </div>
  8. </div>

CSS 代码:

    1. .non-transparent:hover {
    2. background-color: yellow;
    3. }
    4. .transparent {
    5. position: absolute;
    6. top: 0;
    7. left: 0;
    8. text-align: center;
    9. width: 100%;
    10. height: 100%;
    11. filter: alpha(opacity=40);
    12. background-color: rgb(0, 0, 0);
    13. background-color: rgba(0, 0, 0, 0.4);
    14. }
    15. .box {
    16. background-color: yellow;
    17. width: 50%;
    18. height: 50%;
    19. position: relative;
    20. left: 5%;
    21. top: 10%;
    22. }

css 设置元素背景为透明的更多相关文章

  1. css设置元素背景透明度的2种方式

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月9日. 设置元素的背景的透明度可以使用2种方式:方式1:opacity属性.方式2:使用rgba值.两种方式有一点差异,opaci ...

  2. iOS设置截图背景图片透明

    /** 设置图片背景为透明 */- (UIImage *)imageToTransparent { // 分配内存 const int imageWidth = self.size.width; co ...

  3. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  4. CSS控制元素背景透明度总结

    方法一:CSS3的background rgba filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColor ...

  5. 纯css设置元素过渡效果

    1.首先,先设置一个div,待会我们使用css3给这个div设置过渡效果. 2.然后给div设置宽高和背景,这里我就设置成200像素,深粉色. 3.接着开始设置transition属性,通过这个属性就 ...

  6. Android设置Activity背景为透明style

    方法一: 通过Theme.Translucent @android:style/Theme.Translucent @android:style/Theme.Translucent.NoTitleBa ...

  7. jQuery的1.x版本的$(element).css()设置元素字体颜色时出现的问题(在IE8以下)

    最近赶项目,自己写了个基于jQuery的弹出层插件,中间遇到一个问题,怎么也找不到解决方法,最后发现就是空格的问题...欲哭无泪啊... 在给函数传参时,因为写css代码时习惯在:后面加个空格在写样式 ...

  8. css父元素背景覆盖其子元素背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. CSS设置元素的隐藏和显示

    常见的三种方式 display display: none 隐藏对象 display: block 除了转换为块级元素以外,同时还有显示元素的意思 特点:隐藏之后不保留位置 visibility 值h ...

随机推荐

  1. bzoj 3572 [Hnoi2014]世界树——虚树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3572 关于虚树:https://www.cnblogs.com/zzqsblog/p/556 ...

  2. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  3. VBox修改uuid

    1.使用VBoxManage命令时,需要先在命令行中切换到VirtualBox的安装目录下 2.修改vdi的uuid:VBoxManage internalcommands sethduuid  D: ...

  4. DEDECMS ShowMsg()样式修改 提示信息的修改以及美化

    织梦DedeCMS系统,处处都在用到提示信息,但是这个提示框,前台后台一层不变,太死板了,可能有很多人都有过去修改它的想法,只是苦于不知道去哪里 改.今天我就来说说这个吧,DedeCMS的所有提示信息 ...

  5. dedecms问答模块时间显示1970-01-01的解决办法

    在使用dedecms的问答模块的时候,很多人希望能在模板上加上问题的时间,一般我们采用这样的dede标签: {dede:ask row=24 titlelen='50' sort='ok'}   &l ...

  6. python使用分治法找序列最大值

    最近上算法导论课,说道分治法,回来想用python写写程序练练手,于是模仿一通写了如下的代码: __author__ = 'day' def ArrayMaxMin(Array): return ma ...

  7. 学习笔记之Elasticsearch

    Elasticsearch: RESTful, Distributed Search & Analytics | Elastic https://www.elastic.co/products ...

  8. airtest IDE问题汇总

    FAQ 1.同一个脚本,使用IDE可以运行,使用命令行运行报错 原因:曾经开启过anyproxy代理,添加过HTTP_PROXY环境变量,将其取消即可 unset HTTP_PROXY https:/ ...

  9. Jenkins git鬼畜集

    1. Jnekins服务重启后,莫名奇妙就报403错误,内网OK,把内网IP换成外网域名又可以. 莫名其妙解决:点了下notfiy后的Add,然后重输了一次密码,好了....但是这是新增一个账号啊!! ...

  10. FiddlerCoreAPI 使用简介

    原文:https://blog.csdn.net/zhang116868/article/details/49406599 大名鼎鼎的Fiddler大家都知道,或者用过,Fiddler 开放了他的Fi ...