이미지 필터를 적용하는 간단한 HTML 코드를 제공합니다.
이 코드는 이미지 위에 필터를 적용하여 이미지를 수정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>이미지 필터 적용</title>
<style>
/* 이미지 필터 스타일 */
.image-container {
position: relative;
width: 300px;
}
.image-filter {
width: 100%;
height: auto;
}
.filtered-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: grayscale(100%);
opacity: 0.7;
}
</style>
</head>
<body>
<h1>이미지 필터 적용</h1>
<!-- 이미지 필터 컨테이너 -->
<div class="image-container">
<img class="image-filter" src="your-image.jpg" alt="이미지">
<img class="filtered-image" src="your-image.jpg" alt="필터 적용된 이미지">
</div>
</body>
</html>
위 코드에서는 .image-container 클래스로 이미지 컨테이너를 생성하고,
원본 이미지와 필터 적용된 이미지를 함께 표시합니다. 필터 적용은 .filtered-image 클래스에
filter 속성을 사용하여 적용되며, 여기서는 회색조 필터를 사용하고 있습니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 주식 가격 정보 표시 (1) | 2023.12.08 |
|---|---|
| 사용자 인증 폼 (1) | 2023.12.08 |
| 음악 재생 컨트롤 (0) | 2023.12.08 |
| 텍스트 애니메이션 적용 (1) | 2023.12.08 |
| 간단한 메일 폼 (1) | 2023.12.08 |
