CSS 배경 이미지의 불투명도를 변경하는 방법

소개

opacity는 요소의 불투명도를 변경할 수 있는 CSS 속성입니다. 기본적으로 모든 요소의 값은 1입니다. 이 값을 0에 가깝게 변경하면 요소가 점점 더 투명하게 나타납니다.

일반적인 사용 사례는 이미지를 배경의 일부로 사용하는 것입니다. 불투명도를 조정하면 텍스트의 가독성을 향상시키거나 원하는 모양을 얻을 수 있습니다. 그러나 하위 요소에 영향을 주지 않고 불투명도가 있는 요소의 배경 이미지를 대상으로 지정할 수 있는 방법은 없습니다.

이 문서에서는 불투명도가 있는 배경 이미지에 대한 이 제한을 해결하는 두 가지 방법을 제시합니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

불투명도에 익숙함.
위치: 상대 및 위치: 절대에 익숙합니다.
스태킹 컨텍스트 및 z-index에 익숙함
:before 및 :after 의사 요소에 익숙합니다.

방법 1 - 별도의 이미지 요소 사용 및 위치 지정

첫 번째 접근 방식은 두 가지 요소에 의존합니다. 하나는 position: relative로 참조 지점을 제공하는 "wrap\입니다. 두 번째는 position: absolute 로 콘텐츠 뒤에 나타나는 img 요소입니다. 및 스택 컨텍스트.

다음은 이 접근 방식에 대한 마크업의 예입니다.

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://assets.linux-console.net/labs/images/community_bg.png"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

그리고 함께 제공되는 스타일은 다음과 같습니다.

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}

이 마크업과 스타일은 이미지 위에 텍스트가 있는 결과를 생성합니다.

부모 demo-wrap <div>는 블록을 포함하는 절대 위치 지정을 설정합니다. demo-bg <img>는 position: absolute로 설정되고 약간의 불투명도가 할당됩니다. demo-content <div>는 position: relative로 설정되며 마크업 배열 방식으로 인해 <보다 더 높은 스택 컨텍스트를 갖습니다.demo-bg. 스택 컨텍스트를 보다 세밀하게 제어하기 위해 z-index를 사용할 수도 있습니다.

이 접근 방식에는 몇 가지 제한 사항이 있습니다. 이미지가 모든 요소의 크기를 수용할 만큼 충분히 크다고 가정합니다. 이미지가 잘려서 표시되거나 요소의 전체 높이를 덮지 않도록 하려면 크기 제한을 적용해야 할 수 있습니다. 또한 "배경 위치\를 제어하고 깨끗한 "배경 반복\ 대안을 제어하지 않으려면 추가 조정이 필요합니다.

방법 2 - CSS 의사 요소 사용

두 번째 접근 방식은 의사 요소에 의존합니다. :before 및 :after 의사 요소는 대부분의 요소에서 사용할 수 있습니다. 일반적으로 content 값을 제공하고 이를 사용하여 처음이나 끝에 추가 텍스트를 추가합니다. 그러나 빈 문자열을 제공하는 것도 가능하며 그런 다음 디자인에 의사 요소를 활용할 수 있습니다.

다음은 이 접근 방식에 대한 마크업의 예입니다.

<div class="demo-wrap">
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

그리고 함께 제공되는 스타일은 다음과 같습니다.

.demo-wrap {
  position: relative;
}

.demo-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('https://assets.linux-console.net/labs/images/community_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.demo-content {
  position: relative;
}

이 마크업과 스타일은 이미지 위에 텍스트가 있는 결과를 생성합니다.

부모 demo-wrap <div>는 블록을 포함하는 절대 위치 지정을 설정합니다. 의사 요소 :before는 position: absolute로 설정되고 약간의 불투명도가 할당되며 background-size: cover 를 사용합니다. 사용 가능한 모든 공간을 차지합니다.

이 접근 방식은 background-position, background-repeat 및 background-size와 같은 다른 background 속성을 지원한다는 장점이 있습니다. 코드>. 이 접근 방식은 clearfix 솔루션과 같이 다른 디자인 효과와 충돌할 수 있는 의사 요소 중 하나를 사용하는 단점이 있습니다.

결론

이 문서에서는 불투명도가 있는 배경 이미지에 대한 이 제한을 해결하는 두 가지 방법에 대해 배웠습니다.

CSS에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 CSS 주제 페이지를 확인하세요.