css怎么样设置透明度？下面本篇文章就来给大家介绍一下使用css设置透明度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在CSS中想要设置透明度，可以使用opacity属性和rgba()来设置。opacity属性用于设置元素的不透明级别，rgba()用于对颜色值设置透明度。

opacity属性

opacity属性用于设置元素的不透明级别；不透明度的值介于0.0到1.0之间，其中低值表示高透明度，高值表示低透明度。不透明度百分比计算为Opacity％=Opacity* 100。

语法：

  1. opacity: value|inherit;

属性值：

  • value：指定不透明度。从0.0（完全透明）到1.0（完全不透明）

  • inherit：Opacity属性的值应该从父元素继承

rgba()

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

语法：

  1. rgba（R,G,B,A）;

rgba() 里的值的介绍：

  • R：红色值。正整数 （0~255）

  • G：绿色值。正整数 （0~255）

  • B：蓝色值。正整数（0~255）

  • A：透明度。取值0~1之间

示例1：设置文本透明

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     	<meta charset="UTF-8">
  5.         <title>Opacity属性</title>
  6.         <style>
  7.             .demo {
  8.                 background: #009991;
  9.                 padding: 15px;
  10.                 text-align:center;
  11.                 width:300px;
  12.             }  
  14.             #rgba {
  15.                 padding: 15px;
  16.                 text-align:center;
  17.                 width:300px;
  18.             }
  19.             .rgba1 {
  20.                 background: rgba(0, 153, 145, 0.1);
  21.             }  
  23.             .rgba2 {
  24.                 background: rgba(0, 153, 145, 0.5);
  25.             }  
  27.             .rgba3 {
  28.                 background: rgba(0, 153, 145, 0.8);
  29.             }
  30.             .rgba4 {
  31.                 background: rgba(0, 153, 145, 1.0);
  32.             }
  33.             .g1 {
  34.                 float:left;
  35.                 margin-left:50px;
  36.             }
  37.             .g2 {
  38.                 margin-top:-40px;
  39.                 margin-left:50px;
  40.                 float:left;
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.         <div class ="g1">
  46.             <p style = "font-size:24px;font-weight:bold;">透明盒子</p>
  47.             <div class = "demo"><p>10% 不透明度</p></div>
  48.             <div class = "demo"><p>50% 不透明度</p></div>
  49.             <div class = "demo"><p>80% 不透明度</p></div>
  50.             <div class = "demo"><p>100% 不透明度</p></div></div><br><br>  
  52.         <div class = "g2">
  53.             <p style = "font-size:24px;font-weight:bold;">rgba颜色值</p>
  54.             <div id = "rgba"><p>10% 不透明度</p></div>
  55.             <div id = "rgba"><p>50% 不透明度</p></div>
  56.             <div id = "rgba"><p>80% 不透明度</p></div>
  57.             <div id = "rgba"><p>100% 不透明度</p></div>
  58.         </div>
  59.     </body>
  60. </html>

效果图：

示例2：设置图像透明

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Opacity属性</title>
  5.         <style>
  6.             .forest {
  7.             	width: 350px;
  8.                 opacity: 0.5;
  9.             }
  10.             .opacity {
  11.                 padding-top:100px;
  12.                 text-align:center;
  13.             }
  14.             body {
  15.                 background:url(1.jpg) no-repeat;
  16.                 background-size:cover;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div class = "opacity">
  22.             <img class = "forest" src = "1.jpg">
  23.         </div>
  24.     </body>
  25. </html>

效果图：

css怎么样设置透明度？的更多相关文章

  1. css中怎么设置透明度的问题

    小伙伴们是不是在找怎么样去设置页面的透明度的方法呢...别找了,我这儿就有,而且肯定够用了. 我自己会用到的就有两种,可以和大家分享一下. 1.用opcity的方法去设置透明度.代码如下: .div ...

  2. 理解CSS前景色和透明度

    前面的话 颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少.一个网页给人们留下的第一印象实际上就是它的整体颜色.关于如何设置颜色,请移步CSS的6种颜色模式.实际上,颜色的应用主要分为前 ...

  3. css改变背景透明度【转】

    兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...

  4. 第七十六节，css颜色和透明度,盒子阴影和轮廓,光标样式

    css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一．颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...

  5. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  6. css改变背景透明度

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:.transparent{filter:alpha(opacity=90); -moz-opacity:0.9; -khtml- ...

  7. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  8. IOS 设置透明度导致底层View始终可见

    正确效果如图:下面的toolBar应该看不见它下面的View, 避免方法:[self.view  addSubView:aSubView];这个aSubView一定不能设置不透明度,应将其设置为Cle ...

  9. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

随机推荐

  1. Java实现第九届蓝桥杯阶乘位数

    阶乘位数 题目描述 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞&qu ...

  2. install-package : 由于无法加载项目 mydemo 的详细信息，操作失败

    安装nuget package包提示错误 install-package : 由于无法加载项目 mydemo 的详细信息,操作失败 解决方法 项目用dotnet cli 命令dotnet new mv ...

  3. 用mvc框架查询数据库数据

    介绍下mvc框架,mvc框架一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑. 首先我们 ...

  4. zabbix 交换机端口显示端口描述

    ZABBIX 监控系统流量图显示端口描述   进入web 选择配置--主机 选择触发器原型 编辑触发器 随便点开一个触发器 选择触发器原型   逐个点开修改 {#IFDESCR}: ({#IFALIA ...

  5. 架构C02-商业模式与架构设计

    商业模式与架构设计:A段架构与B段架构 <思考软件创新设计:A段架构师思考技术> A段架构师必须具备鲜活的创新思维,睿智的策略思考,犀利的洞察力和灵活的战术才能把握稍纵即逝的商机     ...

  6. go 语言中windows Linux 交叉编译

    记录一下. 在windows系统编译,然后再Linux系统运行. 在项目目录下运行: 命令: set GOARM=5 set GOARCH=arm set GOOS=linux go build xx ...

  7. [转] 间接系统调用syscall(SYS_gettid)

    点击阅读原文 在linux下每一个进程都一个进程id,类型pid_t,可以由 getpid()获取. POSIX线程也有线程id,类型pthread_t,可以由 pthread_self()获取,线程 ...

  8. @hdu - 5822@ color

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个每个点出度都为 1 的有向连通图以及 m 种颜色.求本质 ...

  9. 包子凑数(dp 0-1、完全背包)【背包问题】

    包子凑数(蓝桥杯) 感谢:@ Statusrank 题目链接(点击) 题目描述 小明几乎每天早晨都会在一家包子铺吃早餐.他发现这家包子铺有N种蒸笼,其中第i种蒸笼恰好能放Ai个包子.每种蒸笼都有非常多 ...

  10. 快捷键浏览存储过程的内容（执行文中的User Store Proc，设置快捷方式的指向usp_Name）

    虽然不常用,但使用时还是在用传统方法查看存储过程的内容, sp_helptext usp_Name;下面这段执行后可设置快捷查询usp的内容(但是需要在每个数据库下都存在,不能直接在master,并且 ...