网页设计中css怎么实现背景透明?(示例)-tutorial css-php.cn

网页设计中css怎么实现背景透明?(示例)

藏色散人

Lepaskan： 2018-08-25 17:36:32

asal

10513 orang telah melayarinya

在网页设计中，有时候会需要实现css背景透明文字不透明的效果。那么通过css怎么让背景透明呢？本篇文章就给大家介绍关于如何用css设置背景透明并且文字不透明的方法。希望对有需要的朋友有所帮助。

css背景透明文字不透明的具体代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css div背景透明示例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            padding: 50px;
            background: url(img/2.png) 0 0 repeat;
        }

        .demo{
            padding: 25px;
            background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
        }
        .demo p{
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="demo">
    <p>css背景透明文字不透明</p>
</div>
</body>
</html>

Salin selepas log masuk

效果如下图：

从上图可以明显看出，css实现了div背景透明，并且文字不透明的效果。这里我们需要掌握的知识点就是，background-color中的rgba()函数。在css中使用rgba(0,0,0,0.5);这样的格式来表示rgha。其中最后一个参数表示Alpha通道，表示透明度。

这里也顺便说一下CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。 RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。

取值：

R	红色值。正整数 \| 百分数
G	绿色值。正整数 \| 百分数
B	蓝色值。正整数 \| 百分数
A	Alpha透明度。取值0~1之间。

那么通过以上关于用css设置背景透明，文字不透明的效果内容介绍，希望对有需要的朋友有所帮助。

Atas ialah kandungan terperinci 网页设计中css怎么实现背景透明?(示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

R	红色值。正整数 \| 百分数
G	绿色值。正整数 \| 百分数
B	蓝色值。正整数 \| 百分数
A	Alpha透明度。取值0~1之间。

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

网页设计中css怎么实现背景透明?(示例)