タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

cssとbackground-imageに関するrikuoのブックマーク (1)

  • レスポンシブなsvgを作ったら背景画像を追加してみよう

    svgを単なる画像ファイルだと考えていたら大間違いなんです.そこで今回はsvgに背景画像を追加して,画像の大きさを変えても固定位置に画像が表示されるというサンプルを紹介します. ※2014/3/22 補足を追加 通常svgグラフィックはサイズ固定な場合が多いのですが,下の作業を行うだけでレスポンシブなsvg(サイズ可変なsvg)に変化します. ルートとなるsvg要素のwidth,height属性を削除する viewBox属性,preserveAspectRatio属性を追加する ただこれだと,画像全体が拡大・縮小されてしまうためグラフィックの一部を固定位置・サイズとしたいケースに対応できません. ところで,svgではcssを使ったスタイル指定が出来ます.であれば,cssのbackground-imageプロパティを利用できないかと考えます.svgグラフィックはルートとなるsvg要素の設定(

  • 1