在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 问题描述 在一个m行n列的二维数组中,每一行都按照从左到右递增的顺序排列,每一列都按照从上到下递增的顺序排列.现在输入这样的一个二维数组和一个整数,请完成一个函数,判断数组中是否含有该整数. 2 ...

  2. Java实现 蓝桥杯 算法提高金属采集

    问题描述 人类在火星上发现了一种新的金属!这些金属分布在一些奇怪的地方,不妨叫它节点好了.一些节点之间有道路相连,所有的节点和道路形成了一棵树.一共有 n 个节点,这些节点被编号为 1~n .人类将 ...

  3. Java培训Day01——制作疫情地图(一)

    一.前言 此次培训,是为期三天的网上培训.最终的目的是制作出疫情地图.首先我们来看看主要的讲课内容大纲. Day1 |-Java语法学习(个人感觉讲得还可以,主要围绕本次培训作出的讲解,没有像网上的基 ...

  4. Python--循环--for && while

    for循环示例:猜数字游戏 winning_number = 38 for i in range(3): guess_num = int(input("guess num:") ) ...

  5. 使用PyQtGraph绘制数据滚动图形(3)

    import pyqtgraph as pg import numpy as np from pyqtgraph.Qt import QtGui, QtCore app = pg.QtGui.QApp ...

  6. Linux中使用expect脚本实现远程机器自动登录_linux shell

    首先创建一个expect脚本ssh_expect,文件内容如下: #!/usr/bin/expect -f set hostname [lindex $argv 0] set user [lindex ...

  7. 存储系列之 DAS、SAN、NAS三种常见架构概述

    随着主机.磁盘.网络等技术的发展,对于承载大量数据存储的服务器来说,服务器内置存储空间,或者说内置磁盘往往不足以满足存储需要.因此,在内置存储之外,服务器需要采用外置存储的方式扩展存储空间,今天在这里 ...

  8. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

  9. [转] 图解单片机下载程序电路原理之USB转串口线、CH340、PL2303、MAX232芯片的使用

    点击阅读原文 目前为止,我接触单片机已有不少时日,从选择元器件.原理图.PCB.电路硬件调试.软件开发也算小有心得 .单片机软件开发里面第一步当属下载程序了,如果这一步都有问题,那么后面的一切便无从谈 ...

  10. 宝塔面板搭载yii2.0项目关于open_basedir报错解决办法

    昨天配置完宝塔的lamp后,然后把原本的yii项目放上去,发现出现三个报错,就是大概  require openssl之类的三个错误 然后去宝塔的界面里去配置了一个端口,然后再去阿里云上开放这个端口 ...