불투명도와 CSS 필터

이미지에 텍스트를 넣을 때 항상 가독성 문제에 직면하게 됩니다.

저는 이 문제를 해결하기 위해 종종 불투명도를 사용합니다. 그리고 CSS 필터 속성과 다양한 효과가 있습니다.

기본적으로 후자가 불투명도보다 더 질적인 렌더링을 제공한다고 생각합니다. 하지만 그 점은 분명히 하고 싶습니다.

불투명하게

쉽습니다. 상위 요소에 배경색을 추가하고 이미지의 불투명도 속성을 활용합니다.

.element-parent {
  background-color: #000;
}

.element-image {
  opacity: 0.7;
}

CSS 필터 사용

필터 속성을 사용하면 필터나 그래픽 효과를 적용할 수 있습니다.
이 속성은 흐림, 밝기, 대비, 그림자, 회색조, 색조 회전, 반전, 불투명도, 채도 및 세피아와 같은 필터를 제공합니다.

여기서 제가 관심을 두는 필터는 밝기입니다.
불투명도보다 훨씬 쉽습니다. 이미지 요소에 필터 속성을 적용합니다.

.element-image {
  filter: brightness(0.7);
}

결과

비교를 위해 코드펜을 만들어봤습니다.
왼쪽은 불투명 버전이고 오른쪽은 필터 버전입니다.
경주 결과 별 차이 없어보이네요!

그래서 어떤 솔루션을 써야할지 고민이시라면 voulvoul과 같다고 말씀드리고 싶습니다. 당신에게 가장 잘 어울리는 것.

위 내용은 불투명도와 CSS 필터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!