Comment définir le dégradé de transparence en CSS-tutoriel CSS-php.cn

Comment définir le dégradé de transparence en CSS

藏色散人

Libérer： 2022-12-30 11:13:33

original

17702 Les gens l'ont consulté

Comment définir le dégradé de transparence en CSS : créez d'abord un exemple de fichier HTML ; puis introduisez des images dans le corps ; enfin utilisez la fonction "linear-gradient()" et coopérez avec rgba pour définir le dégradé de transparence.

Comment définir le dégradé de transparence en CSS

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur Dell G3.

css définit le dégradé de transparence

En CSS, vous pouvez utiliser la fonction Linear-gradient() avec rgba() pour définir le dégradé de transparence. La fonction Linear-gradient() est utilisée pour définir le dégradé et le paramètre rgba() est utilisé pour définir la transparence des couleurs.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1.jpg)
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: url(1.jpg)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
<div class="div2">正常图片</div>
</body>
</html>

Copier après la connexion

Rendu :

Comment définir le dégradé de transparence en CSS

Description :

gradient-linéaire Le () est utilisée pour créer une "image" d'un dégradé linéaire.

Pour créer un dégradé linéaire, vous devez définir un point de départ et une direction (spécifiée sous forme d'angle) de l'effet de dégradé. Vous devez également définir la couleur finale. La couleur d'arrêt est la transition douce que vous souhaitez que Gecko effectue, et vous devez en spécifier au moins deux, bien que vous puissiez spécifier plus de couleurs pour créer des effets de dégradé plus complexes.

Syntaxe CSS :

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Copier après la connexion

RGBA ()

RGBA signifie (Rouge-Vert-Bleu-Alpha) C'est une extension de RVB pour inclure un canal « alpha », qui permet de définir la transparence des valeurs de couleur.

Recommandé : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!