*참고 사이트
Sprite Cow - Generate CSS for sprite sheets
Sorry, it isn't working out between us It's not you, I just can't get along with your browser. Maybe if things change in the future... maybe if you bring Chrome, Firefox, Opera or even IE10 to the party... not promising anything, but give me a call.
www.spritecow.com
*이용 방법
-사이트에 들어가 'open image'를 누른다.
-해당 영역을 클릭하면 아래에 좌표가 뜨는 것을 복사하고 css에 붙여넣는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.sprite{
background: url('img/sprite.png') no-repeat 0 -304px;
width: 218px;
height: 72px;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
* 배경이미지 크기 조절하고 싶을때 (background, background-size, width, height 재설정)
footer .seller-service-btn::after{
content:''; display: block;
background: url('../img/sprite__common.png') no-repeat -343.5px -117.5px;
/* background,width,height는 http://www.spritecow.com/에 이미지파일올리고 위치좌표구한것 */
background-size: 400px auto;/*이미지사이즈800절반(속성보고 따로 추가) 400하고
위에 background위치랑 width,height반으로 나눔*/
width: 9.5px;
height: 5px;
position: absolute;
right: 8px; top:50%; transform: translateY(-50%);
}
'HTML & CSS' 카테고리의 다른 글
| text-align 속성 (0) | 2022.05.23 |
|---|---|
| form 사용하기 (0) | 2022.05.16 |
| 이미지의 특정영역 누르면 이동하기(maschek.hu 이미지맵 사이트) (0) | 2022.05.16 |
| 메뉴에 hover시 글자 아래에 밑줄 생기기(transition) (0) | 2022.05.16 |
| 1depth와 2depth 메뉴 만들기 (0) | 2022.05.16 |
