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

이번 강의에서는 CSS를 사용하여 이미지 소스를 수정하지 않고 이미지 갤러리를 장식하는 방법을 소개합니다. 여기서 사용된 기술도 매우 간단합니다. 이미지 앞에 45a2772a6b6107b401db3c9b82c049c2을 만들고 해당 범위에 배경 이미지를 사용하여 마스크 효과를 생성하는 것입니다. 이 방법은 간단하면서도 유연합니다. 데모에는 참고할 수 있는 20개 이상의 스타일이 소개되어 있습니다.

이 CSS 기술의 장점

• 시간 절약 — photoshop에서 이미지 템플릿을 만들 필요가 없습니다. 그런 다음 각 이미지에 대해 별도의 파일을 생성합니다.

• 원본 이미지 소스 유지 — 나중에 이미지 테마를 변경해야 할 때 원본 이미지가 없다고 걱정할 필요가 없습니다. 왜냐하면 우리는 그것을 전혀 수정하지 않았기 때문입니다.

• 매우 유연함 — 완전히 다른 스타일을 얻으려면 CSS만 조정하면 됩니다.

• 모든 사이트에서 작동 — 이 CSS 트릭은 모든 사이트와 모든 이미지 크기에서 작동합니다.

• 브라우저 호환성 문제 해결 — 대부분의 브라우저(Firefox, Safari, Opera, 이상하게 동작하는 IE6까지)의 테스트를 통과했습니다.

기본 개념

p에 img를 감싸는 스팬 요소를 생성하고 그 위에 배경 이미지를 적용하여 마스크를 생성해야 합니다. 효과. 빈 스팬 태그를 삽입하고 싶지 않다면 javascript를 사용하여 동적으로 생성할 수 있는데, 이에 대해서는 나중에 소개하겠습니다. 아래 코드는 작동 방식을 보여줍니다. IE PNG 해킹

IE6에서 투명한 PNG 이미지가 작동하도록 하려면 강력한 iepngfix.htc 해킹을 사용해야 합니다. iepngfix.htc 파일을 다운로드하고 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 태그에 다음 코드를 추가하세요.

<!--[if lt IE 7]>
<style type="text/css">

  .photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->

모양

position:absolute。这样你就可以通过为span设置top和left属性，来任意摆布他在p中的位置了。 다양한 스타일 변경을 위해서는 지정된 범위 요소의 CSS만 수정하면 됩니다. 데모 소스 코드를 확인하면 그 비밀을 찾을 수 있습니다.

　

jquery

해결책

빈 범위 태그를 페이지에 직접 추가하고 싶지 않다면 다음을 사용할 수 있습니다. jquery 코드를 사용하면 범위를 동적으로 추가할 수 있습니다.

rree　 #1. 간단한 갤러리

앞서 소개한 기법을 활용하여 갤러리를 만들어 보겠습니다.

　#1b. 미니 아이콘

사진에 다양한 아이콘을 배치하는 방법을 보여주는 예시입니다. 스팬 태그에 대해 다른 CSS

class

이름을 설정해야 합니다.

　 #2. 텍스트가 포함된 사진

이 예에서는 텍스트 링크가 포함된 갤러리를 만드는 방법을 보여줍니다.

　#2b. 팝업 텍스트

　#3. 🎜>

　#4. 코르크보드 갤러리

　sIFR 버전(텍스트 대체)

이 버전에서는 sIFR의 도움으로 em의 텍스트를 손글씨로 바꿀 수 있습니다.

　#4b. 테이프 효과

　#5. >

　#5b. 프놈펜 미술관

　#6. 🎜 >　

　sIFR 버전

　 #7.하이라이트 효과

　#8. 나무판 갤러리

마지막으로 나무판 효과를 얻기 위해 배경 이미지를 사용하는 방법을 보여줍니다.

최종 코멘트

우리는 이 CSS 기술이 매우 유연하고, 매우 창의적이며, 그림과 CSS를 결합한다는 것을 알 수 있습니다. 유기적으로 결합되어 있습니다. 이 방법을 사용하여 다양한 스타일로 자신만의 갤러리를 만들 수도 있습니다.

위 내용은 이미지 갤러리를 장식하기 위해 CSS를 사용하기 위한 HTML5 연습 코드 공유 (1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!