在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实现 洛谷 P1115 最大子段和

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scann ...

  2. java实现放麦子问题

    /* 你一定听说过这个故事.国王对发明国际象棋的大臣很佩服, 问他要什么报酬,大臣说:请在第 1 个棋盘格放 1 粒麦子, 在第 2 个棋盘格放 2 粒麦子,在第 3 个棋盘格放 4 粒麦子, 在第 ...

  3. http1.0 、http1.1和http2.0的区别

    一.HTTP1.0 HTTP 1.1主要区别       1.1 长链接             HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...

  4. CDN百科 | 最近，你的APP崩了吗？

    过去几个月里,#xxx崩了#这个话题频繁出现在热搜榜上,让不少程序员小哥哥瑟瑟发抖. 从疫情宅家时期著名的视频APP“三连崩”,到全面复工开课后的在线教育平台与办公软件频繁宕机,再到报复性消费引发的点 ...

  5. 关于EF的五种状态

    最近半个多月没更新原因是在赶项目...在做项目的时候就会发现自己很多问题,也有很多东西要记录,今天就记录一下对ef新的认识. 也就是关于ef的五种状态管理. Unchanged(持久态) Midifi ...

  6. .Net Core WebAPI + Axios +Vue 实现下载与下载进度条

    故事的开始 老板说:系统很慢,下载半个小时无法下载,是否考虑先压缩再给用户下载? 本来是已经压缩过了,不过第一反应应该是用户下的数量多,导致压缩包很大,然后自己测试发现,只是等待的时间比较久而已,仍然 ...

  7. 做一个有价值的seoer

    什么是SEO就不用在解释了吧,一般来看这篇文章的都是老鸟了,基础的术语解释也啥意义. 从早期的cms建站,到现在的批量镜像站群等操作,似乎搜索引擎现在都下了重手,前几年还好用的方式现在已经不再是那么理 ...

  8. [CF1270F]Awesome Substrings

    题目   点这里看题目. 分析   设前缀和\(s_r=\sum_{i=1}^r [S_i='1']\)   考虑满足要求的子串\((l,r]\)的要求: \[\exists k\in N_+, r- ...

  9. Ubuntu安装Vmware Tools解决屏幕比例失调

    前言 安装ubuntu虚拟机时默认比例如下图,且ubuntu系统选项中没有合适的比例,可以安装Vmware Tools来解决. 注意:该方法只适用于有操作界面的系统,之前有位小伙伴在服务器上也想安装T ...

  10. Chosen by god【组合数打表】

    Chosen by god 题目链接(点击) Everyone knows there is a computer game names "hearth stone", recen ...