CSS에서 Sprite를 통해 이미지 커팅 기술을 구현하는 방법(코드 첨부)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 Sprite를 통해 이미지 커팅 기술을 구현하는 방법(코드 첨부)

yulia

Sep 11, 2018 pm 03:31 PM

CSS Sprites의 장점과 단점

Advantages

1. 이는 웹 페이지의 http 요청을 크게 향상시켜 페이지 성능을 크게 향상시킵니다. 이는 CSS Sprite가 널리 확산되고 적용되는 주된 이유이기도 합니다.
2. 이미지를 너무 많이 비교했는데, 1개의 사진으로 병합된 3개의 사진 바이트는 항상 이 3개 사진의 바이트 합계보다 작습니다.
3. 사진 모음에 이름을 지정하는 웹 디자이너의 문제를 해결합니다. 모든 작은 요소에 이름을 지정할 필요가 없으므로 웹 페이지 제작의 효율성이 향상됩니다.
4. 스타일 변경은 쉽습니다. 하나 또는 몇 장의 사진의 색상이나 스타일만 수정하면 전체 웹페이지의 스타일을 변경할 수 있습니다. 유지관리가 더욱 편리해졌습니다.

단점

CSS Sprite가 매우 강력한 것은 사실이지만 다음과 같이 무시할 수 없는 몇 가지 단점도 있습니다. # 🎜🎜#1. 사진을 병합할 때는 여러 장의 사진을 질서 있고 합리적으로 하나의 사진으로 병합해야 하며, 섹션에 불필요한 배경이 나타나지 않도록 충분한 공간을 두어야 합니다. 하지만 가장 괴로운 점은 다음과 같습니다. 와이드스크린에서 고해상도 화면의 적응형 페이지의 경우 사진이 충분히 넓지 않으면 배경이 깨지기 쉽습니다.
2 CSS Sprite는 개발 중에 각각을 측정하고 계산해야 합니다. 배경 장치의 정확한 위치는 바느질 작업으로 어렵지는 않지만 매우 지루합니다. 다행히도 Tencent의 Gui Ge는 ADOBE AIR를 사용하여 CSS Sprites 스타일 생성 도구를 개발했습니다. 이미 포토샵 측정보다 낫습니다. 훨씬 더 편리하고, 스타일을 직접 생성, 복사, 복사할 수 있습니다!
3. CSS 스프라이트는 유지 관리가 더 까다롭습니다. 페이지 배경이 약간 변경되면 일반적으로 변경할 필요가 없는 부분은 변경하지 않는 것이 가장 좋습니다. 더 많은 CSS를 변경하지 마십시오. 원래 위치에 배치할 수 없고 (바람직하게는) 이미지를 아래로 추가할 수만 있으면 이미지의 바이트가 늘어나고 CSS도 수정해야 합니다.
4. CSS 스프라이트는 배우고 적용할 가치가 매우 높습니다. 특히 페이지에 여러 개의 아이콘이 있는 경우 더욱 그렇습니다. 간단히 말해서 CSS Sprite를 사용할지 여부를 결정하기 전에 장점과 단점을 비교해야 하는 경우가 많습니다.

HTML 코드:

<body>
<!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
<!-- 以上是Sublime Text快速拼写 -->
<ul class="sprite">
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<div class="clear"></div>
</ul>
</body>

로그인 후 복사

CSS 코드:

<style>
body { background-color: #fc0; color:#333;}
* {margin:0; padding:0;}
ul,li {list-style: none;}
a { color:#f00; font-weight: bold; text-decoration: none;}
.sprite {margin:0 auto; width:1000px; padding-top: 50px;}
.sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; }
.sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; }
.clear { clear:both;}
</style>

로그인 후 복사

JS 코드:

<script src="<a href="http://code.jquery.com/jquery-latest.js"></script">http://code.jquery.com/jquery-latest.js"></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出存放图片的容器的高度;
triggerLi = $(".sprite").children("li");
//找出每一个li,放到一个数组中;
//console.log(iconH);
//在控制台打印出容器的高度;
triggerLi.each(function () {
//遍历数组中的每一个li
var $this = $(this),
//声明变量赋值当前的li;
$index = $this.index();
//声明变量保存当前li的index值;
//console.log($index);
//在控制台打印出每一个li的index值;
//console.log(iconH*$index);
//得出每一个图片对应的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//利用js遍历出每一个s标签的背景图片;
$this.hover(function() {
//鼠标移入
$this.children("s").css("background-position","-132px -"+iconH*$index+"px");
}, function() {
//鼠标移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>

로그인 후 복사

위 내용은 CSS에서 Sprite를 통해 이미지 커팅 기술을 구현하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.