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实现第三届蓝桥杯源码变换
源码变换 这道题因为有一些html语言在编写的时候不会显示出来,所以就用代码格式把题目写出来 [编程题](满分22分) 超文本标记语言(即HTML),是用于描述网页文档的一种标记语言. HTML通过文 ...
- java实现第五届蓝桥杯供水设施
供水设施 X星球的居民点很多.Pear决定修建一个浩大的水利工程,以解决他管辖的N个居民点的供水问题.现在一共有N个水塔,同时也有N个居民点,居民点在北侧从1号到N号自西向东排成一排:水塔在南侧也从1 ...
- CMD指令和GIT指令
CMD指令 dir 显示当前文件夹的所有的文件目录 mkdir 创建文件夹 cd> 创建文件 rd 删除文件夹 del 删除文件 cls 清屏 Linux指令 查看版本 node -v node ...
- tensorflow2.0学习笔记第二章第二节
2.2复杂度和学习率 指数衰减学习率可以先用较大的学习率,快速得到较优解,然后逐步减少学习率,使得模型在训练后期稳定指数衰减学习率 = 初始学习率 * 学习率衰减率^(当前轮数/多少轮衰减一次) 空间 ...
- 【1】svn 指令总结
[1]svn log 1.svn log 2. [2]svn di [3]
- List作为泛型参数实现可接收存储任意类型的List对象
原文链接:https://blog.csdn.net/eeeeasy/article/details/80999650?utm_source=blogxgwz2 在项目中遇到一个问题,想要封装一个通用 ...
- C#数据结构与算法系列(七):约瑟夫问题(Josephu)
1.介绍 Josephu问题为:设编号为1.2....n的n个人围坐在一圈,约定编号为k(1<=k<=n) 的人从1开始报数, 数到m的那个人出列,它的下一位又从1开始报数,数到m的那个人 ...
- 谷歌Chrome成最受欢迎的浏览器 它为啥好用?
毫无疑问,在搜索引擎领域,谷歌是绝对的主导者.但是,一般人却很容易低估我们受到的“控制”.比如,它的浏览器Chrome. 在不到九年的时间,谷歌Chrome浏览器已经成为全球使用最多的网页浏览器.目前 ...
- ArrayList、Vector、LinkedList 区别及底层实现
一.ArrayList.Vector.LinkedList 三者区别 1.ArrayList 底层:是数组结构,查询快,增删慢,线程不安全,效率高.2.LinkedList底层:是链表数据结构,查询 ...
- vue指令,实例成员,父子组件传参
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...