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实现滑动解锁
滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致 ...
- Python中map和reduce函数
①从参数方面来讲: map()函数: map()包含两个参数,第一个是参数是一个函数,第二个是序列(列表或元组).其中,函数(即map的第一个参数位置的函数)可以接收一个或多个参数. reduce() ...
- ubuntu12.04 跳过grub选择
1.修改/etc/grub.d/00_head文件. set timeout=-1 修改成 set timeout = ${GRUB_RECORDFAIL_TIMEOUT:--1} 2.修改/etc/ ...
- @loj - 3120@ 「CTS2019 | CTSC2019」珍珠
目录 @description@ @solution@ @accepted code@ @details@ @description@ 有 \(n\) 个在范围 \([1, D]\) 内的整数均匀随机 ...
- 私有云nextcloud、seafile、syncthing的比较
可选 nextcloud.seafile.syncthing 1. seafile https://www.jianshu.com/p/43f570118e63 https://www.jianshu ...
- 基于mykernel2.0编写一个操作系统内核
基于mykernel2.0编写一个操作系统内核 一. 实验准备 详细要求 基于mykernel 2.0编写一个操作系统内核 按照https://github.com/mengning/mykernel ...
- Shiro反序列化复现
Shiro反序列化复现 ——————环境准备—————— 目标靶机:10.11.10.108 //docker环境 攻击机ip:无所谓 vpsip:192.168.14.222 //和靶机ip可通 1 ...
- 论logstash的玩法（ELK）
本篇文章采用的采用的是logstash-7.7.0版本,主要从如下几个方面介绍 1.logstash是什么,可以用来干啥 2.logstash的基本原理是什么 3.怎么去玩这个elk的组件logsta ...
- Latex文件本机能正常编译，但在另一台电脑不能编译的解决方法
问题:同样的文件在台式机能编译出正常的PDF文件,但发现在另一个电脑上不能编译出PDF文件. \documentclass[preprint,10pt,5p,times,twocolumn]{elsa ...
- 第二章、Web中使用shiro(实现登陆)
虽然Apache Shiro的核心设计目标允许它用于保护任何基于JVM的应用程序(如命令行应用程序,服务器守护程序,Web应用程序等),但本指南将着重讨论最常见的用例:确保运行的Web应用程序一个Se ...