Div 배경 이미지의 불투명도만 조정하는 방법은 무엇입니까?

Div 배경 이미지만의 불투명도

웹 디자인에서 적절한 불투명도 수준을 설정하면 페이지 요소의 시각적 매력을 향상시킬 수 있습니다. 그러나 동일한 컨테이너 내의 다른 요소에 영향을 주지 않고 배경 이미지의 불투명도를 조정하는 것은 어려울 수 있습니다. 이 효과를 얻을 수 있는 방법은 다음과 같습니다.

질문에서 제안한 대로 CSS 의사 요소를 사용하는 방법이 있습니다.

.myDiv {
  background-image: url("your_image.png");
  opacity: 0.5;
}

.myDiv::before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

이렇게 하면 숨겨진 요소(::before)가 생성됩니다. 배경 이미지를 오버레이하고 불투명도를 0.5로 설정하며 div 내의 텍스트는 영향을 받지 않습니다.

그러나 다음을 달성할 수도 있습니다. 더 간단한 접근 방식을 사용하여 동일한 효과를 얻습니다.

.myDiv {
  background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
}

이 방법은 두 가지 색상 정지점을 사용하여 선형 그라데이션을 생성합니다. 여기서 두 정지점 모두 불투명도가 0.5인 반투명 흰색(#FFFFFF)을 지정하고 그 뒤에 배경 이미지. 이렇게 하면 배경 이미지가 50% 불투명도로 표시되고 div 내부의 텍스트는 완전히 표시됩니다.

위 내용은 Div 배경 이미지의 불투명도만 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!