ボタンやテーブルのカラムなどで文字＋アイコンなどの表示をしたい場合があります。
そこで、グラデーションを使った背景のボタンとバックグランドのアイコンを表示させようと思ったら、表示されなく、思考錯誤の上、ようやく出来たのでメモとして記載したいと思います。
目次
- 前提条件
- CSS
- 実行結果
前提条件
- Firefox 22
- Chorme
CSS
backgroundでグラデーション＋画像を表示するのですが、順番があります。最初に画像を指定してからじゃないとダメみたいです。
background: linear-gradient(lightgrey, #666666), url(bg.gif) center right no-repeat;/*これだと表示されない ×*/ background: url(bg.gif) center right no-repeat, linear-gradient(lightgrey, #666666);/*これで表示される ○*/
実行結果
以下のサンプルで実際にFirefoxで実行してみます。<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="utf-8">
<style>
<!--
table{
border: 1px #000000 solid;
border-collapse: collapse;
letter-spacing: 0.05em;
}
th,td{
border: 1px #000000 solid;
padding: 1px 10px;
}
/*成功用CSS*/
th.success {
background: url(bg.gif) center right no-repeat, linear-gradient(lightgrey, #666666);
}
/*失敗用CSS*/
th.failed {
background: linear-gradient(lightgrey, #666666), url(bg.gif) center right no-repeat;
}
-->
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="success">成功</th>
<th class="failed">失敗</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
</body>
</html>
結果は以下のようになります。
0 コメント:
コメントを投稿