css文字不透明度怎么设置？
在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度，让你的文字在网页中看起来是透明的。
CSS设置透明度可用如下两类方法实现：
1、使用rgba
2、使用opacity
使用rgba设置文字不透明度的方法示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div{
background:red;
width:100px;
height:100px;
color:rgba(255,255,255,0.4)
}
</style>
</head>
<body>
<div>
我是透明文字
</div>
</body>
</html>
使用opacity设置文字不透明度示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div{
background:red;
width:100px;
height:100px;
}
p{opacity:0.4;}
</style>
</head>
<body>
<div>
<p>我是透明文字</p>
</div>
</body>
</html>
rgba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。
css文字不透明度怎么设置？的更多相关文章
- css文字的渐变色设置
background-image: -webkit-linear-gradient( ); //设置颜色与渐变方向 -webkit-background-clip: text; //主要用于剪 ...
- CSS中不透明度继承问题的处理
关于CSS中不透明度的设置,除了兼容方面的问题,还有不透明度继承问题,这里只讨论下后者. 那么, 什么时候会发生不透明度继承问题? 当文档结构中有父子嵌套关系的时候,并且父元素有不透明度属性设置时,会 ...
- CSS 文字垂直居中
原始 demo html <div class ="box"> <div class="text"> 我是单行测试文字 </div ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- css 文字垂直居中问题
CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...
随机推荐
- java实现输入日期
/* 从键盘输入一个日期,格式为 yyyy-M-d 要求计算该日期与 1949 年 10 月 1 日距离多少天 例如: 用户输入了:1949-10-2 程序输出:1 用户输入了:1949-11-1 程 ...
- springboot实现定时任务,异步操作,统一结果返回,全局异常处理,拦截器及事务处理
本文是作者原创,版权归作者所有.若要转载,请注明出处. 本文都是springboot的常用和实用功能,话不多说开始吧 定时任务 1.启动类开启注解 @EnableScheduling //开启基于注解 ...
- php symfony/var-dumper 打印插件
$records = array( array( 'id' => 2135, 'first_name' => 'John', 'last_name' => 'Doe', ), arr ...
- HDU-3033 I love sneakers! 题解
题目大意 有 n 个物品,分成了 k 组,每个物品有体积和价值,把 n 个物品放到容量为 V 的背包中,保证每组至少放一件,求能获得的最大价值,如果不能实现,输出"Impossible&qu ...
- mui消息弹出确认框
var btnArray = ['以后再说', '前往添加']; mui.confirm('你需要即时添加员工才可正常使用', '添加员工', btnArray, function(e) { if ( ...
- phpstorm 安装 YUI Compressor 实 结合现自动压缩文件
YUI compressor 官方: http://yui.github.io/yuicompressor/ 下载的快速入口: https://github.com/yui/yuicompressor ...
- （七）POI-读取excel，遍历一个工作簿
原文链接:https://blog.csdn.net/class157/article/details/92816169,https://blog.csdn.net/class157/article/ ...
- Redis系列（四）：数据结构String类型中基本操作命令和源码解析
1.介绍 string类型本质上是char[]数组的封装 中文网:http://www.redis.cn/commands.html#string 2.常用命令 set 命令 set命令的时间复杂 ...
- Ubuntu U盘启动出现“Failed to load ldlinux.c32”解决
最后用ultraISO软碟通,刻录映像时写入方式选择”RAW”,成功解决!!!
- SpringCloud Alibaba (三)：Sentinel 流量控制组件
SpringCloud Alibaba (三):Sentinel 流量控制组件 Sentinel 是什么 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 是面向分布式服务架构 ...