Home >Web Front-end >CSS Tutorial >How to set image transparency in css

How to set image transparency in css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-13 13:53:435223browse

In CSS, you can use the opacity attribute to set the transparency of the image. The syntax is "opacity: value", where the value range is between "0.0-1.0"; when the value is 1, it means completely opaque, when the value is A value of 0.5 represents translucence, and a value of 0 represents complete transparency.

How to set image transparency in css

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Picture transparency setting

.opacity img{opacity: 0.5;}

The code and effect pictures are as follows.

<!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="../images/img.jpg" alt="" width="100%">
        </div>
</body>
</html>

How to set image transparency in css

Recommended learning: css video tutorial

The above is the detailed content of How to set image transparency in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn