html怎么设置透明色背景
html中设置透明色背景的方法：1、直接使用“backgroud:rgba(R,G, B, A)”设置透明色背景。2、先使用“backgroud:颜色值;”样式来设置背景色；然后使用“opacity:透明度值”样式来给背景色添加一个透明度即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
html设置透明色背景
在html中设置背景颜色透明的方法有两种：一种是通过rgba方式设置，另一种是通过backgroud和opacity设置。
1、rgba方式
所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。
用法：
background:rgba(R,G, B, A);
红色（R）：代表颜色中的红色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
绿色（G）：代表颜色中的绿色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
蓝色（B）：代表颜色中的蓝色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
透明度（A）：代表透明度，取值 0（完全透明）~1（完全不透明） 之间。
下面我们就来看通过rgba方式设置背景颜色透明度的具体实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin: 0 auto;
}
.div1{
background: rgba(220, 38, 38, 1);
}
.div2 {
background: rgba(220, 38, 38, 0.2);
}
</style>
</head>
<body>
<div class="div1">背景颜色，没有设置透明度</div><br />
<div class="div2">背景颜色，设置了透明度</div>
</body>
</html>效果图：
1、通过backgroud和opacity设置背景颜色透明
background属性中属性值比较简单，这里就不细说了，我们在这里来简单看看opacity属性
opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，换句话说，数字越大代表元素越不透明。
参数除了可以使用＂不透明度＂之外，还有 inherit 继承父层属性，不过浏览器支援度较差，不建议使用。
看完了对于两种属性的介绍，下面我们就来看通过backgroud和opacity设置背景颜色透明度的具体实例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin: 0 auto;
border: 1px solid #ccc;
}
.div1 {
background: red;
}
.div2 {
background: red;
opacity: 0.2;
}
</style>
</head>
<body>
<div class="div1">背景颜色，没有设置透明度</div><br />
<div class="div2">背景颜色，设置了透明度</div>
</body>
</html>效果图：
推荐教程：CSS视频教程
推荐在线手册：css在线手册
Atas ialah kandungan terperinci html怎么设置透明色背景. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
