CSS 선택기로 이미지를 삽입할 수 있나요?-CSS 튜토리얼-php.cn

CSS 선택기로 이미지를 삽입할 수 있나요?

藏色散人

풀어 주다： 2020-12-21 09:52:07

원래의

3759명이 탐색했습니다.

Css 선택기는 CSS 선택기 ":before" 및 ":after"와 같은 이미지를 삽입할 수 있습니다. 삽입 방법은 ".p_beforeImg:before {content: ''; 배경..”}.

CSS 선택기로 이미지를 삽입할 수 있나요?

이 튜토리얼의 운영 환경: 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: &#39;&#39;;
            background: url(&#39;../img/triangle_up.png&#39;) 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>

로그인 후 복사

렌더링:

CSS 선택기로 이미지를 삽입할 수 있나요? 예시 2:

before를 after로 바꾸고, 이미지 스타일을 삽입하고 그대로 사용하세요

.p_afterImg {
        background: #eeeeee;
        width: 200px;
        height: 80px;
        border-radius: 6px;
        padding: 10px 20px;
        position: relative;
    }
    .p_afterImg:after {
        content: &#39;&#39;;
        background: url(&#39;../img/triangle_down.png&#39;) no-repeat bottom right /32px 16px;/*兼容没测*/
        position: absolute;
        bottom: -15px;
        z-index: 2;
        width: 32px;
        height: 16px;
    }

로그인 후 복사

렌더링:

위 내용은 CSS 선택기로 이미지를 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!