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

생성된 콘텐츠로 CSS 배경 이미지 불투명도 가능

배경 색상의 불투명도 조정과 달리 배경 이미지의 알파 값 조정은 이전에는 어려운 것으로 간주되었습니다. 그러나 CSS 생성 콘텐츠는 배경 이미지의 불투명도를 동적으로 변경하는 솔루션을 제공합니다.

이 기술을 구현하려면 지정된 위치와 크기로 컨테이너 div를 만들고 나머지 콘텐츠 요소로 채웁니다. 다음으로, 컨테이너용으로 생성된 의사 요소 내에 배경 이미지를 정의합니다. 그런 다음 의사 요소 내에서 불투명도 속성을 조작할 수 있습니다.

예시 데모는 http://jsfiddle.net/gaby/WktFm/508/에서 찾을 수 있습니다. 다음은 필요한 코드 조각입니다:

HTML

<div>

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 이벤트 및 클래스를 통해 동적으로 제어할 수 있습니다. 예를 들어 다음 코드는 마우스를 올리면 불투명도를 1로 조정합니다.

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

또한 CSS 전환을 사용하여 불투명도 변경을 원활하게 애니메이션화할 수 있습니다. .container:before 규칙에 다음 속성을 추가하면 불투명도가 1초에 걸쳐 1로 전환됩니다.

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

이 기술은 브라우저마다 호환성이 다양하다는 점에 유의하는 것이 중요합니다. Firefox 5 이상에서는 지원하지만 Internet Explorer 9 이하에서는 지원하지 않습니다. Chrome과 같은 Webkit 기반 브라우저는 버전에 따라 지원이 일관되지 않을 수 있습니다.

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