Setting the filter
property to brightness(100%)
changes how bright an image is, where 100%
is the image's default level.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>John's Smart Lights</h3>
<img src="https://mimo.app/i/light-bulb.png">
</body>
img {
filter: brightness(100%);
width: 150px;
}
The lower the brightness, the darker the image. We can see it in action with brightness set to 20%
.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>John's Smart Lights</h3>
<img src="https://mimo.app/i/light-bulb.png">
</body>
img {
filter: brightness(20%);
width: 150px;
}