스프라이트로 배경 위치를 설정하는 방법은 무엇입니까?

Question

안녕과 새해 복 많이 받으세요 : D 그래서 여기에 문제가 있습니다 : 스프라이트가있는 페이지에 6 개의 열기구를 보여주고 싶습니다. 실제 스프라이트에는 6 개의 컬러 풍선이 있습니다. 코드와 결과를 볼 수 있습니다.

HTML :

<div class="hotairballoons"> 
    <div class="ball-1"></div> 
    <div class="ball-2"></div> 
    <div class="ball-3"></div> 
    <div class="ball-4"></div> 
    <div class="ball-5"></div> 
    <div class="ball-6"></div> 
</div> 

CSS :

.hotairballoons > div[class^="ball-"] { 
    background: url(../img/sprites.png); 
    background-repeat: no-repeat; 
    width: 69px; 
    height: 110px; 
} 

.ball-1 { 
    background-position: 0px 0px; 
} 

.ball-2 { 
    background-position: -69px 0px; 
} 

.ball-3 { 
    background-position: -138px 0px; 
} 

.ball-4 { 
    background-position: 0px -110px; 
} 

.ball-5 { 
    background-position: -69px -110px; 
} 

.ball-6 { 
    background-position: -138px -110px; 
} 

결과 :

01 : 개발자 콘솔에서 보여줍니다 무엇

왜 가로 지르는가? 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

잘 작동합니다.

하지만 콘솔을 수정하려면 각 background-position 끝에 !important을 추가해야합니다!

Answer 2

스타일을 수정하는 데는 두 가지 사항이 필요합니다.

CSS 특이성

선택기 .hotairballoons > div[class^="ball-"] 점수 0 2 1. 선택기 .ball-1은 0 1 0입니다. 점수가 높으면 동일한 규칙이 낮은 점수를 무시합니다. 이 도구 CSS Explain을 사용하여 확인할 수 있습니다.

속기 CSS 규칙

속성 background는 속기 규칙이다 background-position0% 0%는 초기 값의 일부이다. 그들은 오버라이드 (override)하지 않도록

규칙 .hotairballoons > div[class^="ball-"] {background:...;} 무시 .ball-1 {background-position:...;}

이 문제를 해결하려면, 당신은, 각각의 규칙과 같은 background을 선언 할 수 있습니다.

background-position의 설정을 해제 한 상태에서 각 개별 클래스 내에서 설정하십시오.

.ball-1 { 
    background-position: 0px 0px; 
} 
.ball-2 { 
    background-position: -69px 0px; 
} 

등