이미지 갤러리를 장식하기 위해 CSS를 사용하기 위한 HTML5 연습 코드 공유 (2)-H5 튜토리얼-php.cn

이미지 갤러리를 장식하기 위해 CSS를 사용하기 위한 HTML5 연습 코드 공유 (2)

黄舟

풀어 주다： 2017-03-23 15:43:09

원래의

1635명이 탐색했습니다.

이전 강의에서 우리 솔루션은 jquery를 사용하여 스팬 태그를 생성했습니다. 이번 강의에서는 :before 및 :after 의사 클래스 를 사용하여 더 나은 솔루션을 사용하겠습니다. :before는 추가 요소를 추가하는 데 자주 사용됩니다.

HTML

다음은 ul 리스트로 표현되는 이미지 갤러리입니다.

<ul class="gallery clip">
    <li>
        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
    </li>
    <li>
        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image">
    </li>
    <li>
        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
    </li></ul>

로그인 후 복사

CSS

다음은 .gallery에 설정된 CSS입니다. 여기서 주목해야 할 점은 에서 a 태그에 대해 position:relative을 설정해야 한다는 것입니다. 갱도.

.gallery {
    margin: 0 0 25px;
    text-align: center;
}.gallery li {
    display: inline-block;
    margin: 5px;
    list-style: none;
}.gallery a {
    position: relative;
    display: inline-block;
}

로그인 후 복사

　:before 요소

:before 요소에 30 x 60px 클립 배경 이미지를 지정합니다. CSS 콘텐츠 속성 을 null 값으로 설정했습니다. 빈 콘텐츠 속성이 없으면 컨테이너가 표시되지 않습니다.

.clip a:before {
    position: absolute;
    content: &#39; &#39;;
    top: -5px;
    left: -4px;
    width: 30px;
    height: 60px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}

로그인 후 복사

아트 테두리

이 기술을 사용하면 이미지에 마스킹 효과를 추가할 수 있습니다. 아래 예에서는 이미지 배경을 예술적인 테두리로 변경했습니다.

.frame a:before {
    position: absolute;
    content: &#39; &#39;;
    top: -22px;
    left: -23px;
    width: 216px;
    height: 166px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}

로그인 후 복사