CSS로 배경 이미지 불투명도를 어떻게 제어할 수 있나요?

CSS를 통해 배경 이미지 불투명도 조작

배경 색상의 불투명도를 변경하는 것과 대조적으로 배경 이미지 불투명도 조정에 관한 쿼리가 발생합니다. 다양한 투명도 수준으로 이미지를 저장하는 것은 옵션이지만 동적 알파 값 제어가 바람직합니다.

이를 위해 두 개의 DIV 요소를 중첩하는 간단한 접근 방식이 있습니다.

<div>

기능적이지만 방법은 번거롭고 더 복잡한 레이아웃을 방해합니다.

CSS 생성 콘텐츠

대체 솔루션은 CSS 생성 콘텐츠에 있으며, 이를 통해 컨테이너 요소에 배경 이미지를 직접 설정할 수 있습니다.

.container{
    position: relative;
    z-index:1;
    overflow:hidden; 
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

이 방법을 사용하면 배경 이미지 불투명도 제어가 가능합니다.

동적 불투명도 조작

그러나 생성된 콘텐츠의 불투명도를 동적으로 수정할 수는 없습니다.

이 제한을 피하려면 클래스와 CSS 이벤트 사용을 고려하세요.

.container:hover:before{
    opacity:1;
}

CSS 전환

CSS 전환을 사용하여 배경 이미지 불투명도를 동적으로 애니메이션화할 수 있습니다.

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

위 내용은 CSS로 배경 이미지 불투명도를 어떻게 제어할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!