CSS를 사용하여 배경 이미지 불투명도를 어떻게 조정할 수 있습니까?

CSS 생성 콘텐츠를 사용하여 배경 이미지 불투명도 조정

이름에서 알 수 있듯이 CSS background-image-opacity 속성을 사용하면 다음을 수정할 수 있습니다. 배경 이미지의 투명도. 그러나 이러한 속성은 CSS 내에 존재하지 않는다는 점에 유의하는 것이 중요합니다.

CSS 생성 콘텐츠 및 클래스 사용

대체 접근 방식은 CSS 생성 콘텐츠를 사용하여 흐린 배경 만들기:

<div class="container">
  contents
</div>

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

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

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

이 기술을 사용하면 흐린 배경을 표시할 수 있습니다. 이미지의 불투명도를 동적으로 조정할 수 없습니다.

CSS 전환 사용

배경 이미지의 불투명도에 애니메이션을 적용하려면 CSS 전환을 사용할 수 있습니다.

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

.container:before 규칙에 이렇게 추가하면 불투명도가 전환됩니다. 1초에 걸쳐 1로 변경됩니다.

브라우저 호환성

• Firefox 5 이상(Firefox 4도 가능)
• IE 9 ( 실패 )
• Webkit 기반 브라우저(Chrome 26 이상)

이 접근 방식은 현재 최신 버전의 Firefox에서만 지원된다는 점에 주목할 필요가 있습니다.

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