앞뒤 위조 요소를 사용하여 배경 이미지 불투명도 변경

:before와 :after 위조 요소는 웹 사이트에 추가 스타일을 추가하는 좋은 방법입니다. 진정으로 필요하지 않은 추가 HTML을 추가할 필요가 없습니다.본고에서 우리는 이러한 위조 원소의 매우 흔히 볼 수 있는 실제 응용을 연구할 것이다.
계속하기 전에 위류와 위원소가 무엇인지 빨리 알아봅시다.

괴뢰

Pseudo-classes 특정 상태에 있는 요소의 스타일을 설정합니다.예를 들어 사용자가 마우스를 아이콘 위에 놓을 때 아이콘의 색을 바꾸거나 아이콘을 눌렀을 때 단추를 팝업하려고 할 수도 있습니다. 이 모든 것은 :hover, :active 등 위조 클래스를 사용해서 할 수 있습니다.
구문:

selector:pseudo-class {
  property: value;
}

위원소

위조 클래스와 달리 Pseudo-elements는 선택한 요소의 특정 부분에 대한 스타일을 설정하는 데 사용됩니다.위조 요소는 HTML을 추가하지 않고 추가 요소를 추가하거나 배치하는 것과 같습니다.예를 들어 ::first-letter 위조 요소를 사용하여 요소의 첫 번째 자모를 편집할 수 있다.
구문:

selector::pseudo-element {
  property: value;
}

주: CSS3이 출시된 후 위조류는 단일 사칭(:), 위조원소는 이중 사칭(::)을 사용하는 것이 정상이 되었다.
이제 위선기가 무엇인지 알았으니 ::before와 ::after의 위원소의 작용에 대해 이야기해 봅시다.

위조 원소 전후

간단하게 말하면 ::before 와 ::after 위조 요소는 각각 선택한 요소의 앞뒤와 뒤에 내용을 추가할 수 있습니다.content 속성을 정의할 때만 이 두 위조 요소가 요소 안에 하위 요소를 만들 수 있습니다.
우리는 하나의 예로 그것을 더욱 잘 이해할 수 있다.
div를 만들고 "there"를 쓰십시오.

  <div>
    there
  </div>

이div에 before 위조 요소를 만들고'Hello'내용을 제공합니다

  div::before{
      content: "Hello";
    }

이것은 div의 내용 앞에'Hello'를 추가한 것을 볼 수 있다.
이제div에 대한 애프터 위조 요소를 만들고 내용을 "💜"

  div::after{
      content: "💜";
    }

유사하게, 애프터 위조 요소가 '💜"우리 프로그램 내용 이후에.
알아야 할 사항:

는 ::before 또는 ::after 요소만 하위 요소(문서 트리가 있는 요소)를 받아들일 요소에 삽입할 수 있기 때문에 <img />, <video> 및 <input> 요소는 작용하지 않습니다.

2) 원소에는 전후 위조 원소가 하나만 있을 수 있다.
그러나 우리는 보통 앞뒤 위조 원소를 사용하지 않는다.반대로 이런 것들은 우리 사이트에서 더 많은 양식 사용법이 있다.우리는 이 두 가지 위조 요소를 사용하여 우리 사이트에서 사람을 경외하게 하는 효과와 디자인을 창조할 수 있다.오늘 우리는 이러한 기능을 토론할 것이다.
단락을 추가하고lorem ipsum의 내용을 포함하는div를 만듭니다.

  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quaerat vero eum, natus fugiat distinctio optio soluta, aperiam placeat amet consequatur cupiditate nisi inventore</p>
  </div>

지금 우리 홈페이지에 배경 그림을 하나 주자.

body{
    background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

아이구!지금 우리는 우리의 텍스트를 잘 볼 수 없다.아마도 우리가 배경 이미지의 불투명도를 낮추려고 시도한다면, 우리는 이 문제를 해결할 수 있을 것이다.

body{
    background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

이것은 우리가 예상한 것처럼 그렇게 효과가 없다.배경 이미지의 불투명도가 확실히 낮아졌지만, 이것 또한 텍스트의 불투명도를 낮추었다.
이제 비포어와 애프터 위조류를 어떻게 사용해서 이 문제를 해결하는지 살펴봅시다.
div에 before 위조 요소를 만들고 빈 문자열을 내용으로 합니다.before 대신 애프터 위조 요소를 만들 수 있습니다. 이것은 다를 것이 없습니다.

div::before{
      content: '';
    }

이제 배경 이미지의 코드를 바디에서before 위조 요소로 옮깁니다.

div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }

현재 배경 그림을 볼 수 없습니다. 이것은 우리의 위조 요소가 아직 아무런 차원도 없기 때문입니다.화면 전체를 덮을 수 있도록 position:absolute 높이와 너비 100%를 주십시오.

div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      height: 100%;
      width: 100%;
    }

그러나 우리는 여전히 약간의 공백을 볼 수 있다.이 문제를 해결하기 위해서 우리는 그것top: 0과 하나left: 0를 줄 것이다.

div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

현재, 우리의 그림은 화면을 정확하게 덮어썼지만, 지금은 텍스트의 맨 위에 있습니다.이 문제를 해결하기 위해서 우리는 위원소 az-index: -1를 제시할 것이다.

div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

이렇게 하면 배경 이미지가 텍스트 뒤에 배치됩니다.
이제 배경 그림의 불투명도를 낮추어 봅시다.

div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0.5;
    }

정말 쓸모가 있다!
이 모든 것은 배경 이미지를 변경하기 위해 앞뒤 위조 요소를 사용하는 불투명도에 대한 것입니다.더 많은 실제 실현이 필요하다면 이것article by Habdul Hazeez을 보십시오.

참조 링크

MDN Docs on pseudo classes and pseudo elements

Article on pseudo-elements on web.dev