在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文字不透明度怎么设置?的更多相关文章

  1. css文字的渐变色设置

      background-image: -webkit-linear-gradient( ); //设置颜色与渐变方向   -webkit-background-clip: text; //主要用于剪 ...

  2. CSS中不透明度继承问题的处理

    关于CSS中不透明度的设置,除了兼容方面的问题,还有不透明度继承问题,这里只讨论下后者. 那么, 什么时候会发生不透明度继承问题? 当文档结构中有父子嵌套关系的时候,并且父元素有不透明度属性设置时,会 ...

  3. CSS 文字垂直居中

    原始 demo html <div class ="box"> <div class="text"> 我是单行测试文字 </div ...

  4. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  5. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  6. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  7. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  8. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  9. css 文字垂直居中问题

    CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...

随机推荐

  1. Java实现硬币收集问题

    1 问题描述 在n*m格木板中放有一些硬币,每格的硬币数目最多为一个,在木板左上方的一个机器人需要收集尽可能多的硬币并把它们带到右下方的单元格.每一步,机器人可以从当前的位置向右移动一格或向下移动一格 ...

  2. java实现第39级台阶(三十九级台阶)

    标题: 第39级台阶 小明刚刚看完电影<第39级台阶>,离开电影院的时候,他数了数礼堂前的台阶数,恰好是39级! 站在台阶前,他突然又想着一个问题: 如果我每一步只能迈上1个或2个台阶.先 ...

  3. Java实现第九届蓝桥杯分数

    分数 题目描述 1/1 + 1/2 + 1/4 + 1/8 + 1/16 + - 每项是前一项的一半,如果一共有20项, 求这个和是多少,结果用分数表示出来. 类似: 3/2 当然,这只是加了前2项而 ...

  4. Spring IOC 概念及作用

    一:程序之间的耦合及解决 耦合性(Coupling):也叫耦合度,是对模块间关联程度的度量.耦合的强弱取决于模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少.模块间的耦合度是指模块之间的依 ...

  5. 原声js数组去重方法

    数组去重方法 方法一 ---- 利用数组filter + indexOf方法去重 方法二 ---- 利用数组forEach + indexOf方法去重 方法三 ---- 利用数组from方法 + Se ...

  6. 使用Json框架解析遇到Java关键字时的解决方案

    当Json数据中的key为Java关键字时,在定义实体类的时候不能对该字段进行声明,所以需要对字段进行特殊处理 使用Gson解析 在与Java关键字冲突的字段加上@SerializedName注解 @ ...

  7. 制作sentinel docker镜像

    在sentinel官方下载jar包即可运行,但是在部署的时候一个一个的启动jar包很不方便,制作成镜像方便部署和管理. 1)直接运行 # 修改端口号,默认是8080 java -jar sentine ...

  8. 【经验心得】谈一谈我IT行业未来的方向

    随着科技的发展,越来越多的入门行业将被淘汰,其实淘汰的不仅仅是工厂.环卫工人.普工这些无技术含量的工作,有一些运维.编辑等低门槛的行业也将被淘汰,这也是我这两年看互联网发展趋势得出来的结论,人类要想发 ...

  9. Java学习之IO流及网络编程

    一.字节 1.1字节输入流(java.io.InputStream) ​ 此抽象类是表示字节输入流的所有类的超类 1.1.1定义了所有子类共性的方法: ​ int read() 从输入流中读取数据的下 ...

  10. Yii2.0ActiveRecord嵌套子查询(AR子查询)

    yii2.0的ActiveRecord是可以嵌套子查询的. 比如从一个子查询里面筛选数据. 首先实例化出来一个Query对象,代表子查询. $subQuery = new \yii\db\Query( ...