EN
CSS - create transparent image
0 points
In this article, we would like to show you how to create a transparent image using CSS.
Quick solution:
xxxxxxxxxx1
.transparent {2
opacity: 50%; /* opacity: 0.5; */3
}
In this example, we create three styles, three stages of the transparent image using opacity property and we assign the styles to the img elements using class selector (.class).
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
display: flex;8
}9
10
img {11
height: 100px;12
margin: 5px;13
}14
15
.transparent1 {16
opacity: 20%; /* opacity: 0.2; */17
}18
19
.transparent2 {20
opacity: 50%; /* opacity: 0.5; */21
}22
23
.transparent3 {24
opacity: 90%; /* opacity: 0.9; */25
}26
27
</style>28
</head>29
<body>30
<img class="transparent1" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />31
<img class="transparent2" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />32
<img class="transparent3" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />33
</body>34
</html>