今回CSS 珍百景 Advent Calendar 2014にエントリーさせていただきましたが、バグというよりCSSセレクタの対処法的な記事です。 例えば、ボタンを作成する時、CSSで背景画像を指定する時はたいていボタン全てをデザインする事がザラでしたが、スマホの横幅可変のボタンを作成する時は、できるだけCSSのみで作成したいですが、ワンポイントで画像をのせたい場合もあります。そんな時に背景色やグラデーションに背景画像を重ねる時の方法を備忘録としてまとめます。 ※今回の検証は「firefox」と「chrome」のみです。「ie」は確認してませんm(_ _)m 背景色と背景画像を表示させたい場合 一般的な角丸色付きボタンの右端に矢印を付けたい場合。 【失敗例】まず、何も考えずに組むとこんな感じ background:url(img/arrow.png) no-repeat; backgrou
![(K)背景色やグラデーションと背景画像を同時に反映させる場合(CSS覚え書き) | web(K)campus](https://cdn-ak-scissors.b.st-hatena.com/image/square/f703337f8ce62438379e65766d5e209c615cac0a/height=288;version=1;width=512/https%3A%2F%2Fwebkcampus.com%2Fwp-content%2Fuploads%2F2014%2F09%2Fbackground_color_image_top.jpg)