CSS에는 여러 의사 선택기가 포함되어 있으며 그 중 '::before'가 그 중 하나입니다. CSS의 각 의사 선택기를 사용하면 다양한 스타일을 사용하여 HTML 요소의 스타일을 지정할 수 있습니다.
또한 '::before' 의사 선택기를 사용하면 이 튜토리얼에서 배우게 될 특정 HTML에 대한 배경 이미지를 설정할 수 있습니다.
튜토리얼을 시작하기 전에 ':before'와 '::before'가 동일하다는 점을 분명히 하겠습니다. CSS2는 ':before'를 사용하고, CSS3는 '::before'를 사용합니다.
사용자는 '::before' 의사 선택기를 사용하여 다음 구문에 따라 특정 HTML 요소에 대한 배경 이미지를 설정할 수 있습니다.
으아악위 구문에서는 CSS 선택기와 함께 '::before' 선택기를 사용했습니다. 실제로 요소 앞에 콘텐츠를 추가합니다. 여기서는 HTML 콘텐츠를 설정할 필요가 없기 때문에 빈 콘텐츠를 사용했습니다. background-image 속성을 사용하여 배경 이미지를 설정하고 position 속성을 사용하여 배경 이미지의 위치를 설정합니다.
아래 예에서는 "배경" 클래스를 포함하는 div 요소를 만들었습니다. CSS에서는 클래스 이름을 사용하여 div 요소에 액세스하고 CSS 스타일을 적용합니다. 또한 div 요소의 클래스 이름과 "::before" 의사 선택기를 사용하여 배경 이미지를 추가했습니다.
선택기에서 상단, 하단, 왼쪽, 오른쪽 위치를 설정합니다. 또한 배경 이미지와 관련된 몇 가지 속성을 추가하여 조작했습니다. 출력에서 사용자는 전체 웹 페이지의 배경 이미지를 관찰할 수 있습니다.
으아악아래 예에서는 특정 div 요소에 대한 배경 이미지를 설정하기 위해 '::before' 의사 선택기를 사용하는 방법을 시연했습니다.
여기에서는 특정 div 요소에 대해서만 배경 이미지를 설정하기 위해 의사 선택기에서 이미지의 크기를 설정했습니다. 또한 '배경 크기: 표지' 속성을 사용했습니다.출력에서는 전체 div 요소가 아닌 배경 이미지가 포함된 div 요소를 볼 수 있습니다.
으아악
예 3('::before' 선택기를 사용하여 선형 그래디언트를 배경으로 설정)출력에서 div 요소의 배경으로 그라데이션을 볼 수 있습니다.
으아악
'::before' 의사 선택기를 사용하여 배경 이미지를 설정하는 방법을 배웠습니다. 의사 선택기를 사용하여 웹 페이지에 콘텐츠를 추가하면 웹 페이지의 현재 흐름에서 콘텐츠를 제거하여 독립적으로 콘텐츠를 추가합니다.따라서 의사 선택기를 사용하여 현재 콘텐츠에 영향을 주지 않고 웹 페이지에 콘텐츠를 추가할 수 있습니다. 또한 웹페이지 위에 콘텐츠를 추가할 수도 있습니다. 여기에서는 다른 콘텐츠 위에 배경 이미지를 추가할 수도 있지만 "z-index" 속성을 사용하여 이미지를 div 요소의 배경으로 설정했습니다.
위 내용은 CSS에서 의사 선택기 앞에 ::를 사용하여 배경 이미지를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!