html 背景颜色设置为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...

旧城等待， 2022-10-07 04:46 356阅读 0赞

在网页布局中有时为了网页的整体美观，可能需要将网页中的某些部分设置为背景颜色透明，那么如何设置背景颜色透明呢？本篇文章就来给大家介绍一下css设置背景颜色透明的方法。

在css中设置背景颜色透明的方法有两种：一种是通过rgba方式设置，另一种是通过backgroud和opacity设置。

下面我们就来分别看看css中这两种方法实现背景颜色透明的具体实例

1、通过backgroud和opacity设置背景颜色透明

background属性中属性值比较简单，这里就不细说了，大家可以参考css学习手册来了解一下，我们在这里来简单看看opacity属性

opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是

1.0，换句话说，数字越大代表元素越不透明。参数除了可以使用＂不透明度＂之外，还有 inherit

继承父层属性，不过浏览器支援度较差，不建议使用。

看完了对于两种属性的介绍，下面我们就来看通过backgroud和opacity设置背景颜色透明度的具体实例

代码如下：

width:300px;

height:200px;

margin:0 auto;

border:1px solid \#ccc;

background:red;

opacity:0.2;

\}

背景颜色透明效果如下：

![934cefc72feaf1ebdad86827c78c5dd6.png][]

说明：通过backgroud和opacity设置背景颜色透明度，如果背景上面有文字的话，那么文字也会变成透明，就像下面的效果

![5ebde6f46a9496e7984ce9e616e3a61a.png][]

所以要看情况来使用这种方法来设置背景颜色透明。

2、通过rgba方式设置背景颜色透明

所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。

用法：background:rgba(R,G, B, A);

下面我们就来看通过rgba方式设置背景颜色透明度的具体实例：

背景颜色透明

.title\_div\{

width: 200px;

height: 200px;

line-height: 30px;

text-align: center;

margin:0 auto;

background-color:rgba(220,38,38,0.2);

\}

rgba方式设置背景颜色透明度效果如下：

![0a65437ec11d5eafb6fd91466590068f.png][]

说明：通过rgba方式设置背景颜色透明度，可以设置背景颜色透明而文字不透明，但是这种方法的兼容性不好，不兼容ie浏览器

本篇文章到这里就全部结束了，关于css中更多的知识大家可以参考php中文网css视频教程、css3视频教程、css学习手册和css3学习手册进一步的学习。

[934cefc72feaf1ebdad86827c78c5dd6.png]: /images/20221005/9578613ffcdd4a3ba4b241e8cee9c395.png
[5ebde6f46a9496e7984ce9e616e3a61a.png]: /images/20221005/c56c8765806a4d4a88802c41815495d9.png
[0a65437ec11d5eafb6fd91466590068f.png]: /images/20221005/5dbeb9224c6f4b529a45be0809400fc0.png

发表评论取消回复

表情：

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

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

相关阅读

相关如何设置文字颜色和背景颜色？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 设置文字颜色（color属性） ⭐ 设置背景颜色（background-color属性） ⭐ 写在最后

曾经终败给现在/ 2023年10月14日 16:24/ 0 赞/ 56 阅读

相关 Aspose.Words 设置背景颜色4种效果（当前段落设置背景颜色，所有段落文字设置背景颜色，当前单元格设置背景颜色，当前段落文字设置背景颜色）

1、当前段落设置背景颜色实现代码： Aspose.Words.Document doc = new Document();//新建一个空白的文档 As

短命女/ 2023年10月05日 09:52/ 0 赞/ 14 阅读

相关 input输入框输入数值后，设置背景颜色为透明

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:f

灰太狼/ 2022年12月29日 14:14/ 0 赞/ 165 阅读

相关 Eclipse背景颜色设置

Eclipse背景颜色修改：操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说，白色很刺激我们的眼睛，所以我经常会改变workspace的背景色，使眼睛舒服一些。设置

﹏ヽ暗。殇╰゛Y/ 2022年12月22日 04:45/ 0 赞/ 313 阅读

相关 Cadence 背景颜色设置

目录概述一、Allegro PCB Designer 二、OrCAD Capture 三、总结 -------------------- 概述有

约定不等于承诺〃/ 2022年10月20日 00:54/ 0 赞/ 1020 阅读

相关 html 背景颜色设置为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...

在网页布局中有时为了网页的整体美观，可能需要将网页中的某些部分设置为背景颜色透明，那么如何设置背景颜色透明呢？本篇文章就来给大家介绍一下css设置背景颜色透明的方法。在cs

旧城等待，/ 2022年10月07日 04:46/ 0 赞/ 357 阅读

相关设置背景颜色

设置背景颜色： <input type="color" οnchange="document.body.bgColor=document.getElementById('cur

末蓝、/ 2022年07月15日 10:23/ 0 赞/ 314 阅读

相关 HTML示例01---设置背景颜色

本来是想用用蚂蚁金服开源的前端框架：Ant Design Pro，地址：[https://pro.ant.design/index-cn][https_pro.ant.desi

不念不忘少年蓝@/ 2022年03月19日 10:48/ 0 赞/ 299 阅读

相关 jQuery设置背景颜色

<script type="text/javascript"> $(document.body).css("background","pink")

我会带着你远行/ 2021年12月09日 06:59/ 0 赞/ 467 阅读

相关 css 一个div既设置背景图又设置背景颜色

1. 需求 : 设置一个背景上面为背景图下面为颜色 background: url('../images/invite_friends.png') 0

快来打我*/ 2021年09月17日 04:08/ 0 赞/ 706 阅读