CSS字体透明度怎么设置？

红太狼 2021-01-28 16:40 897阅读 0赞

在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度，让你的字体在网页中看起来是透明的。

**在css3中新增了一个rgba属性，所谓rgba属性，就是R（红）G（绿）B（蓝）三原色加ALPHA（透明度），**下面我们就来具体看看这个rgba属性如何设置字体透明度。

**首先利用RGBA来设置背景颜色透明度是非常简单的，我们来简单看一个例子：**

<!DOCTYPE html>
    <html>
    <head>
     <title></title>
     <style type="text/css">
    .div{
     background-color:rgba(220,38,38,0.2);
     width:100px;
     height:100px;
    }
    </style>
    </head>
    <body>
    <div class="div">
     我是文字
    </div>
    </body>
    </html>

## RGBA来设置背景颜色透明度的效果如下： ##

![format_png][]

上述代码是不是很简单，那么如果将字体设置透明度我们可以如何利用RGBA呢？

其实也非常简单，设置字体的透明度，我们可以对color的rgba属性进行设置。

## 我们来看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 class="div">
     我是透明文字
    </div>
    </body>
    </html>

## 字体透明度的效果如下： ##

![format_png 1][]

本篇文章到这里就全部结束了，需要更多内容关注我！

[format_png]: /images/1611852021777.jpg
[format_png 1]: /images/1611852001805.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，897人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 文本字体怎么设置颜色

这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一、认识CSS 颜色（CSS color）这里要介绍的是网页设置颜色包含有哪些

深碍√TFBOYSˉ_/ 2024年04月01日 18:25/ 0 赞/ 107 阅读

相关 CSS字体大小设置参考

乍一听css字体设置很容易,其实真做起来不然。我们工程师使用原力，他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。 font-s

深藏阁楼爱情的钟/ 2023年10月16日 20:35/ 0 赞/ 97 阅读

相关 css背景透明(css背景透明度怎么设置)

CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /\ 白色并且阿尔法通道是0.9\/

我会带着你远行/ 2023年09月26日 13:14/ 0 赞/ 46 阅读

相关移动端字体设置rem，怎么设置

我们的手机屏幕宽度有时候不一致，字体设置一致就会展示样式有出入，对字体有兼容有两种方式一：少部分手机适配px html\{font-size:10px\} @me

向右看齐/ 2023年01月02日 03:25/ 0 赞/ 267 阅读

相关【CSS】CSS怎么设置小于12px的字体浏览器限制最小字体大小解决方法

CSS的最小尺寸为1px，所以理论上可以将font-size设置为1px，但是实际上如果将font-size属性缩小到12px以下就没有效果了，这是因为浏览器限制了最小字体大小

今天药忘吃喽~/ 2022年12月27日 12:53/ 0 赞/ 595 阅读

相关 css设置透明度不影响子元素

<body> <div style="background-color:rgba(0,255,0,0.2);"> 显示文字 </div>

末蓝、/ 2022年06月13日 07:18/ 0 赞/ 661 阅读

相关 CSS背景透明度

opacity:1;—-这是不透明 opacity:0;—-这是全透明 opacity:0.7;—-这是透明度为70% filter:alpha(opacity=70

我会带着你远行/ 2022年06月04日 06:57/ 0 赞/ 306 阅读

相关 CSS - firefox与IE透明度(opacity)设置区别

IE： filter:alpha(opacity=sqlN) 其中 sqlN的值域为\[0, 100\] js:ieNode.style.filter="alpha(

怼烎@/ 2022年01月10日 10:33/ 0 赞/ 361 阅读

相关 css如何设置透明度？设置透明度的两种方法（代码实例）

在前端页面开发布局的时候，为了给用户呈现不同的效果，经常需要设置透明度，那么css是怎样设置透明度的？本章给大家介绍用css设置透明度的两种方法（代码实例）。有一定的参考...

你的名字/ 2021年01月29日 17:58/ 0 赞/ 917 阅读

相关 CSS字体透明度怎么设置？

在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度，让你的字体在网页中...

红太狼/ 2021年01月28日 16:40/ 0 赞/ 898 阅读