背景圖像和漸變 - 控制圖像的大小

Question

我使用背景圖像和漸變 - 請參閱下面的代碼。我只想爲圖片設置一個百分比高度，這適用於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 */ 

任何人都可以發現錯誤的代碼？

Answer 1

已解決。

下面的代碼將給出背景中第一個元素的寬度，在這種情況下是圖像，然後第二個設置背景中第二個元素的寬度，即漸變。

這意味着我可以在背景中控制圖像的大小，同時還具有使用漸變的流體背景。

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;