CSS 선택기로 이미지를 삽입할 수 있나요?
- 藏色散人원래의
- 2020-12-21 09:51:513669검색
Css 선택기는 CSS 선택기 ":before" 및 ":after"와 같은 이미지를 삽입할 수 있습니다. 삽입 방법은 ".p_beforeImg:before {content: ''; 배경..”}.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
추천: "css 비디오 튜토리얼"
CSS 선택기: before 및 :after는 콘텐츠 속성을 사용하여 이미지를 삽입할 수 있습니다.
content 속성은 :before 및 :after 의사 요소와 함께 사용되어 생성된 콘텐츠를 요소의 헤드 또는 테일에 삽입합니다.
설명: 이 속성은 요소 앞이나 뒤에 배치된 생성된 콘텐츠를 정의하는 데 사용됩니다. 기본적으로 이는 인라인 콘텐츠인 경우가 많지만 이 콘텐츠가 생성하는 상자 유형은 표시 속성을 사용하여 제어할 수 있습니다.
:before 및 :after
기본 표시: inline;
콘텐츠 속성을 설정해야 합니다. 그렇지 않으면 콘텐츠 속성은 :before 및 :after 의사 요소에만 적용할 수 있습니다. 기본값은 user-select: none입니다. 즉, :before 및 :after의 내용은 사용자가 선택할 수 없습니다.
pseudo 요소는 .target:hover:after와 같은 의사 클래스와 함께 사용할 수 있습니다.
:before 및 :after는 CSS2에서 제안되었으므로 IE8과 호환됩니다.
::before 및 ::after는 의사 클래스와 의사 요소를 구별하기 위해 CSS3로 작성되었습니다.
CSS 의사 요소의 기타; include::before, ::after, ::first-letter, ::first-line, ::selection 등
은 DOM을 통해 사용할 수 없으며 단지 순수한 표현일 뿐입니다. 특별한 경우 생성된 콘텐츠는 액세스 관점에서 현재 화면 읽기에서 지원되지 않습니다.
예시 1: before를 통해 삼각형 팁 이미지 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<style type="text/css">
.p_beforeImg {
background: #eeeeee;
width: 200px;
height: 80px;
border-radius: 6px;
padding: 10px 20px;
position: relative;
}
.p_beforeImg:before {
content: '';
background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容没测*/
position: absolute;
top: -15px;
z-index: 2;
width: 32px;
height: 16px;
}
</style>
</head>
<body>
<p class="p_beforeImg">通过before添加三角尖图片</p>
</body>
</html>렌더링:
예시 2:
before를 after로 바꾸고, 이미지 스타일을 삽입하고 그대로 사용하세요
.p_afterImg {
background: #eeeeee;
width: 200px;
height: 80px;
border-radius: 6px;
padding: 10px 20px;
position: relative;
}
.p_afterImg:after {
content: '';
background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容没测*/
position: absolute;
bottom: -15px;
z-index: 2;
width: 32px;
height: 16px;
}렌더링:
위 내용은 CSS 선택기로 이미지를 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!