<p>Ми можемо встановлювати прозорість для елементів (наприклад, фото), використовуючи різні значення від 0 до 1:</p>

<div class="demo">
	<div class="box">
		<img src="https://lorempixel.com/165/150/" alt="example" class="one">
		<span>1.0</span>
	</div>
	<div class="box">
		<img src="https://lorempixel.com/165/150/" alt="example" class="two">
		<span>0.5</span>
	</div>
	<div class="box">
		<img src="https://lorempixel.com/165/150/" alt="example" class="three">
		<span>0.25</span>
	</div>
</div>

body {
	font-family: sans-serif;
	line-height: 1.45;
	font-size: 17px;
	padding: 16px 16px 0 16px;
}

.demo {
	display: flex;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: space-between;
}

.one {
	opacity: 1.0;
}

.two {
	opacity: 0.5;
}

.three {
	opacity: 0.25;
}

.box span {
	display: block;
	text-align: center;
	font-style: italic;
	font-family: monospace;
	font-size: .9em;
}