1、opacity：不仅背景半透明，内部其他元素也半透明

2、rgba()：只有背景半透明。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width: 50px;

            height: 50px;

            background-color: bisque;

            background:rgba(0,0,0,0.1);

            /*opacity:0.2;*/

        }

    </style>

</head>

<body>

    <div>哈哈</div>

</body>

</html>

CSS——半透明的更多相关文章

  1. css半透明边框

    html <div class="parent"> <div class="translucent">I am Bob</div& ...

  2. css半透明渐变过渡效果

    效果图: 代码如下: background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)) ...

  3. css半透明

    filter:alpha(opacity=80); /*支持 IE 浏览器*/-moz-opacity:0.80; /*支持 FireFox 浏览器*/opacity:0.80; /*支持 Chrom ...

  4. CSS半透明兼容写法

    filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; 例如: background:#A5CD40; filter: Alpha(opac ...

  5. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  6. html&css复习题(参考答案)

    1. 常用的块属性标签及特征有哪些? 常用块标签:Div  h1~ h6  ol ul li  dl td dd  table tr th td  p  br  form 块标签特征:独占一行,换行显 ...

  7. AFC项目开发文档整理

    AFC项目开发文档整理 PHPCMS 的确是一个伟大的CMS,我对它爱不释手. 标签嵌套无法loop获取的解决办法.关键代码如下: /\*后台添加\*/ $str = preg_replace ( & ...

  8. jQuery弹出遮罩层效果完整示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

随机推荐

  1. Mysql 练习题 及 答案

    --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表  Course(C,Cname,T ...

  2. [kuangbin带你飞]专题五 并查集 A - Wireless Network

    An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical team) have set up a wi ...

  3. NOIP2014 提高组合集

    NOIP 2014 提高组 合集 D1 T1 生活大爆炸版石头剪刀布 首先,先将两个人的猜拳序列都变得不小于n.然后逐个模拟.胜败什么的看表就行了. #include <iostream> ...

  4. SiteMesh2-示例工程

    了解SiteMesh的最佳方法是使用它.假设SiteMesh设置在您的Web应用程序中,本教程将展示如何掌握SiteMesh最强大的方面,如下所示装饰页面: 效果发生在第2步,其中Menu.jsp页面 ...

  5. 多Tabs的横向滚动插件（支持Zepto和jQuery）

    一. 效果图 二. 功能介绍 1. 支持横向移动 2. 支持点击Tab后该Tab居中 3. 拉到最左边和最右边后依然可以拉动,只是tabs的移动距离变小. 三. 使用说明 1. 在你的html中添加T ...

  6. 又通过一道题目，替换字符串 —— 剑指Offer

    https://www.nowcoder.net/practice/4060ac7e3e404ad1a894ef3e17650423?tpId=13&tqId=11155&tPage= ...

  7. unary operator expected

    在centos系统从root用户切换到oracle用的时候,总是提示 : -bash- : :[: unary operator expected 能切换成功,就是总提示上面这个, 后来找到原因,在安 ...

  8. 使用CDN

    CDN的全称是Content Delivery Network.中文直译过来是:内容交付网络. 它的主要意思是,将某些内容进行交付的网络.对于站点开发而言,我们所讲的内容通常指的是内容文件(比如jav ...

  9. Linux网络编程：UDP Socket编程范例

    TCP协议提供的是一种可靠的,复杂的,面向连接的数据流(SOCK_STREAM)传输服务,它通过三段式握手过程建立连接.TCP有一种"重传确认"机制,即接收端收到数据后要发出一个肯 ...

  10. 一个尖括号能干什么，画一个笑脸开始（为了支持交互，它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能－－支持更高级的交互和云服务集成。这就是今天的HTML5）

    一个尖括号 < 一个尖括号能干什么 < ? 你可以编出一顶帽子 <(:-p 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互 ...