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 ...
随机推荐
- OC 语言特点以及与其他语言的区别
OC 作为一门面向对象的语言,兼容c语言的语法,又有区别于其他面向对象语言的地方: 特点: 1.使用自动释放池,通过引用计数处理对象的内存管理. 2.拥有id这种通用对象类型. 3.分类,功能强大,不 ...
- JAVA第三次blog总结
JAVA第三次blog总结 0.前言 这是我们在博客园上第三次写博客,也是本学期最后一次的JAVA学习大总结.现在我们的JAVA已经接近尾声了,对于编程思想和方法的改变依旧是难点,但是经过这一段时间的 ...
- 恕我直言,我怀疑你并不会用 Java 枚举
开门见山地说吧,enum(枚举)是 Java 1.5 时引入的关键字,它表示一种特殊类型的类,默认继承自 java.lang.Enum. 为了证明这一点,我们来新建一个枚举 PlayerType: p ...
- Python如何绘制可视化图?给你一段代码,你能自己做出来吗
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 喜欢的朋友欢迎关注小编,除了分享技术文章之外还有很多福利 没有数据生成的图 ...
- 移动UI系列 - 简单地使用半衰期算法来预测手势的滑动方向与速度
前言 有一个问题, 给定一个物体的运动轨迹, 包含时间和坐标的数组, 如何使用这个数据来预测物体未来的运动走势?? 本文提供了一个很简单的方式去实现这个算法. 效果够用, 又简单, 有一定的准确程度. ...
- ubuntu18.04安装qt时候的错误解决
在ubuntu系统下安装好qt5.5后启动qtceator时提示: Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库Qt5 ...
- 如何利用Excel设计一个唱票统计系统?
具体操作如下: 首先需要一个如下的数据结构. 唱票数G列区域,不能手动输入候选人票数,这样很不方便,所以我们需要一个窗体控件,用点击鼠标的方法来实现唱票.在“开发工具-插入-数值调节钮”下图3处,然后 ...
- 弹出框Alert
selenium提供了三个处理alert的方法 注意:首先需要切换窗口到alert driver.switch_to.alert() (1)点击确定按钮 driver.switch_to.alert. ...
- @Results用法总结
MyBatis中使用@Results注解来映射查询结果集到实体类属性. (1)@Results的基本用法.当数据库字段名与实体类对应的属性名不一致时,可以使用@Results映射来将其对应起来.col ...
- python中的bytes和str类型
经过一上午的查找资料.大概理清楚了bytes类型和str类型的区别. bytes类型和str类型在呈现形式有相同之处,如果你print一个bytes类型的变量,会打印一个用b开头,用单引号括起来的序列 ...