0

css3のグラデーションに関連した、背景画像(background-size)の設定方法について教えてください。 スマホサイトを作成しており、
下記のようにグラデーションとリストのような背景画像を設定しています。
（グラデーションはhttp://www.colorzilla.com/gradient-editor/で作成しました）

#topic {
font-size: 16px;
text-align: left;
text-indent: 22px;
line-height: 44px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
text-shadow: 1px 1px 1px #FFFFFF;
background: #ffffff; /* Old browsers */
background: url(image/topic/list.gif), -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 100%); /* FF3.6+ */
background: url(image/topic/list.gif), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
background: url(image/topic/list.gif), -webkit-linear-gradient(top, #ffffff 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
background: url(image/topic/list.gif), -o-linear-gradient(top, #ffffff 0%,#e3e3e3 100%); /* Opera 11.10+ */
background: url(image/topic/list.gif), -ms-linear-gradient(top, #ffffff 0%,#e3e3e3 100%); /* IE10+ */
background: url(image/topic/list.gif), linear-gradient(to bottom, #ffffff 0%,#e3e3e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: left;

【問題点】
リスト画像をRetinaに対応するために、
background-size: 30px 30px;
一番下に入れたのですが、グラデーションが消えてしまい、うまく表示ができません。
どのように書けばよろしいでしょうか？
ご教授をよろしくお願いいたします。

質問者が選んだベストソリューション

Yahoo!知恵袋 4148日前