CSS에서 의사 선택기 앞에 ::를 사용하여 배경 이미지를 배치하는 방법은 무엇입니까?

CSS에는 여러 의사 선택기가 포함되어 있으며 그 중 '::before'가 그 중 하나입니다. CSS의 각 의사 선택기를 사용하면 다양한 스타일을 사용하여 HTML 요소의 스타일을 지정할 수 있습니다.

또한 '::before' 의사 선택기를 사용하면 이 튜토리얼에서 배우게 될 특정 HTML에 대한 배경 이미지를 설정할 수 있습니다.

튜토리얼을 시작하기 전에 ':before'와 '::before'가 동일하다는 점을 분명히 하겠습니다. CSS2는 ':before'를 사용하고, CSS3는 '::before'를 사용합니다.

문법

사용자는 '::before' 의사 선택기를 사용하여 다음 구문에 따라 특정 HTML 요소에 대한 배경 이미지를 설정할 수 있습니다.

으아악

위 구문에서는 CSS 선택기와 함께 '::before' 선택기를 사용했습니다. 실제로 요소 앞에 콘텐츠를 추가합니다. 여기서는 HTML 콘텐츠를 설정할 필요가 없기 때문에 빈 콘텐츠를 사용했습니다. background-image 속성을 사용하여 배경 이미지를 설정하고 position 속성을 사용하여 배경 이미지의 위치를 ​​설정합니다.

예제 1 ('::before' 의사 선택기를 사용하여 배경 이미지 설정)

아래 예에서는 "배경" 클래스를 포함하는 div 요소를 만들었습니다. CSS에서는 클래스 이름을 사용하여 div 요소에 액세스하고 CSS 스타일을 적용합니다. 또한 div 요소의 클래스 이름과 "::before" 의사 선택기를 사용하여 배경 이미지를 추가했습니다.

선택기에서 상단, 하단, 왼쪽, 오른쪽 위치를 설정합니다. 또한 배경 이미지와 관련된 몇 가지 속성을 추가하여 조작했습니다. 출력에서 사용자는 전체 웹 페이지의 배경 이미지를 관찰할 수 있습니다.

으아악

예 2(특정 div 요소에 대한 배경 이미지 설정)

아래 예에서는 특정 div 요소에 대한 배경 이미지를 설정하기 위해 '::before' 의사 선택기를 사용하는 방법을 시연했습니다.

여기에서는 특정 div 요소에 대해서만 배경 이미지를 설정하기 위해 의사 선택기에서 이미지의 크기를 설정했습니다. 또한 '배경 크기: 표지' 속성을 사용했습니다.

출력에서는 전체 div 요소가 아닌 배경 이미지가 포함된 div 요소를 볼 수 있습니다.

으아악

예 3('::before' 선택기를 사용하여 선형 그래디언트를 배경으로 설정)

아래 예에서는 '::before' 의사 선택기를 사용하여 특정 HTML 요소의 배경에 선형 그래디언트를 설정합니다. 여기서는 이미지 대신 배경에 그라디언트를 설정하기 위해 'Background' 속성 값으로 Linear-gradient() 함수를 사용했습니다.

출력에서 div 요소의 배경으로 그라데이션을 볼 수 있습니다.

으아악

'::before' 의사 선택기를 사용하여 배경 이미지를 설정하는 방법을 배웠습니다. 의사 선택기를 사용하여 웹 페이지에 콘텐츠를 추가하면 웹 페이지의 현재 흐름에서 콘텐츠를 제거하여 독립적으로 콘텐츠를 추가합니다.

따라서 의사 선택기를 사용하여 현재 콘텐츠에 영향을 주지 않고 웹 페이지에 콘텐츠를 추가할 수 있습니다. 또한 웹페이지 위에 콘텐츠를 추가할 수도 있습니다. 여기에서는 다른 콘텐츠 위에 배경 이미지를 추가할 수도 있지만 "z-index" 속성을 사용하여 이미지를 div 요소의 배경으로 설정했습니다.

위 내용은 CSS에서 의사 선택기 앞에 ::를 사용하여 배경 이미지를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!