CSS background-position順序

480 ワード

じゅんじょ

  • background:url()を先に導入してからbackground-position
  • を定義する必要があります.
    [class^='icon'] {
        display: inline-block;
        background:url(images/img.png)  no-repeat;
    }
    .icon-left-select{height:12px;width:7px;background-position:0 0;}
    .icon-share{height:12px;width:11px;background-position:0 -15px;}
    
  • このようにbackground-positionが機能する順序が逆になるとbackgroundは前に設定したbackground-posizionを上書きして失効する
  • .
  • この方法はcss spritesと組み合わせてよく用いられる(精霊図)