HTML 이미지 불투명도
이미지 불투명도는 시간이 지남에 따라 페이드 인 또는 페이드 아웃되는 이미지를 만드는 것입니다. 이것은 두 이미지 사이의 부드러운 전환을 만들거나 애니메이션을 만드는 데 사용할 수 있습니다.
이미지 불투명도를 활용하여 고스트 이미지를 만들 수도 있습니다. 이 이미지는 거의 보이지 않으며 장식용으로 사용됩니다.
또한 이미지 불투명도를 활용하여 네거티브 이미지를 만들 수 있습니다. 이 이미지는 표준 이미지와 반대이며 특수 효과에 사용할 수 있습니다.
HTML 이미지 불투명도
불투명도는 이미지의 불투명도 또는 투명도를 지정하는 이미지 효과입니다. 불투명도 수준이 0인 이미지는 완전히 투명하고 불투명도 수준이 1인 이미지는 완전히 불투명합니다.
불투명도는 0과 1 사이의 숫자 값 또는 0%와 100% 사이의 백분율 값을 사용하여 지정할 수 있습니다.
이미지의 불투명도 수준이 1 미만이면 이미지가 부분적으로 투명하여 배경이 보일 수 있습니다. 이렇게 하면 서로 이미지를 겹치거나 이미지가 배경으로 사라지는 것처럼 보이게 하는 등 다양하고 흥미로운 효과를 만들 수 있습니다.
HTML 이미지 불투명도 속성은 웹 페이지에서 이미지의 불투명도를 제어하는 데 사용됩니다. 이는 이미지를 배경으로 페이드하거나 다른 이미지 위에 레이어로 표시하는 것과 같은 효과를 만드는 데 유용할 수 있습니다.
예를 보자. 이미지를 50% 불투명하게 만들고 싶다면 불투명도를 0.5로 설정합니다. 또한 rgba() 색상 값을 사용하여 불투명도를 설정할 수도 있습니다.
img {
opacity: 0.5;
}
또한 불투명도 속성을 hover 가상 클래스와 결합하여 함께 사라지거나 마우스가 위에 있을 때 꺼지는 이미지를 만들 수 있습니다. 예를 들어 다음과 같이 호버에서 이미지의 불투명도를 0.5로 설정할 수 있습니다.
img:hover {
opacity: 0.5;
}
이렇게 하면 이미지가 반투명하게 나타나 배경이 뒤에 보입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.bg {
background: url(Please add image link here) repeat;
border: 2px solid black;
}
div.ax {
margin: 35px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.ax p {
margin: 10%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="bg">
<div class="ax">
<p>There is some text that is present in this transparent box.</p>
</div>
</div>
</body>
</html>
결론
HTML에서 이미지의 불투명도는 opacity 속성을 사용하여 제어할 수 있습니다. 이 속성은 0 및 1로 설정할 수 있습니다. 여기서 0은 완전히 투명하고 하나는 완전히 불투명합니다.
따라서 이미지를 50% 불투명하게 만들고 싶다면 rgba() 색상 값을 불투명도 0.5로 사용할 수 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn