背景图像和渐变 - 控制图像的大小答案

【问题标题】：Background images and gradients - control size of the image背景图像和渐变 - 控制图像的大小
【发布时间】：2013-05-06 00:59:02
【问题描述】：

我正在使用背景图像和渐变 - 请参阅下面的代码。我只想为图像设置百分比高度，它适用于 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 */

谁能发现代码有问题？

【问题讨论】：

标签： css background webkit gradient

【解决方案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;

【讨论】：