0

背景画像とグラデーションを使用しています - 以下のコードを参照してください。Firefoxで機能する画像のみの高さの割合を設定したいのですが、Safariで機能させる方法がわかりません.Safariで以下のコードを使用すると、背景画像が表示されなくなります。

background: #7f7f7f; /* Old browsers */
background: url(/images/star.png) no-repeat center center / 70% auto, -moz-linear-gradient(top, #7f7f7f 0%, #5b5b5b 100%); /* FF3.6+ */
background: url(/images/star.png) no-repeat center center / 70% auto, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#5b5b5b)); /* Chrome,Safari4+ */
background: url(/images/star.png) no-repeat center center / 70% auto, -webkit-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* Chrome10+,Safari5.1+ */
background: url(/images/star.png) no-repeat center center / 70% auto, -o-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* Opera 11.10+ */
background: url(/images/star.png) no-repeat center center / 70% auto, -ms-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* IE10+ */
background: url(/images/star.png) no-repeat center center / 70% auto, linear-gradient(to bottom, #7f7f7f 0%,#5b5b5b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */

誰かがコードに何か問題があることを発見できますか?

4

1 に答える 1

1

解決しました。

以下のコードは、背景の最初の要素 (この場合は画像) の幅を指定し、2 番目のコードは背景の 2 番目の要素、つまりグラデーションの幅を設定します。

これは、グラデーションを使用して流動的な背景を持ちながら、背景の画像のサイズを制御できることを意味します。

background-size: 80% auto, 100% auto;

完全なコード例

background: url(/images/star.png) no-repeat center center, -moz-linear-gradient(top, #7f7f7f 0%, #5b5b5b 100%); /* FF3.6+ */
background-size: 70% auto, 100% auto;
于 2013-05-06T02:33:24.153 に答える