Comment définir la transparence de l'image en CSS-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Comment définir la transparence de l'image en CSS

Apr 13, 2021 pm 01:53 PM

css 透明度

En CSS, vous pouvez utiliser l'attribut opacity pour définir la transparence d'une image. La syntaxe est "opacity: value", où la plage de valeurs est comprise entre "0.0-1.0" lorsque la valeur est 1, cela signifie complètement opaque, lorsque la valeur est Une valeur de 0,5 représente la translucidité et une valeur de 0 représente une transparence totale.

Comment définir la transparence de l'image en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Paramètres de transparence de l'image

.opacity img{opacity: 0.5;}

Copier après la connexion

Les images de code et d'effet sont les suivantes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        body {
            background:url(../images/bg.jpg) no-repeat; 
            }
        .opacitybox{
            width: 400px;
            height: 200px;
            margin:0 auto; 
            margin-top:320px;
            }
        .opacity img{
            opacity: 0.5;
            }
    </style>
</head>
<body>
        <div class= "opacitybox opacity">
            <img src="/static/imghw/default1.png"  data-src="../images/img.jpg"  class="lazy"   alt=""    style="max-width:90%">
        </div>
</body>
</html>

Copier après la connexion

Comment définir la transparence de limage en CSS

Apprentissage 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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn