カテゴリー:
CSS
タグ:
 html css

このエントリーをはてなブックマークに追加
更新日時:
2013年02月19日(火)
作成日時:
2013年02月19日(火)

前の記事 / 次の記事

基本的には

// sass
ul
  list-style-image url("path/to/image_file")

でいいと思うんだけど、
これだと調べた限り画像の大きさとか透明度を変えられないようなので、

// sass
ul
  list-style: none
  li
    padding: 5px 20px 5px 0
    background: url(path/to/image_file) nor-repeat 0 2px
    background-size: auto 75%

0 2px って指定してるのは、0が横位置の調整で、2pxが縦位置の調整。

とかやるといい感じに嵌まる。
んだけど、背景として設定するならそもそも普通にイメージタグ使えばいいんじゃないの?
ってことで、

-#haml
%ul
  %li
    -# image_tag は Railsのヘルパーメソッド
    %span=image_tag("path/to/image_file", :class => "list-style-image")
    %span=どくけしそう

//sass
ul
  list-style-none
img.list-style-image
  transform: scale(0.75)
  // for IE
  zoom: 0.75
  opacity: 0.7

と書いた方が素直でいいんじゃないかなと。
transform 使ってるところはベンダープレフィックスあった方がいいかも。

そもそも画像自体を加工すればいいじゃんっていうのはもっともなんだけど、
いくつも画像用意するの面倒くさいじゃん。