CSS漸變未在html5網站中正確應用

Question

我正在使用以下網站（ http://www.colorzilla.com/gradient-editor/ ）為我的網站背景生成CSS漸變。 在我的主CSS文件中，將如下代碼放入：

body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f77624+0,f9c655+100 */
    background: #f77624; /* Old browsers */
    background: -moz-linear-gradient(left,  #f77624 0%, #f9c655 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f77624 0%,#f9c655 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f77624 0%,#f9c655 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77624', endColorstr='#f9c655',GradientType=1 ); /* IE6-9 */
}

刷新index.html文件時，我只會看到沒有漸變的background color 。 上面的CSS代碼是否有錯誤？ 如果有幫助，我還將使用HTML5 Boilerplate 。

Answer 1

css漸變代碼僅在最新的瀏覽器上有效。.不能低於IE9，上述代碼沒有問題..只需清除瀏覽器的歷史即可..

 body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f77624+0,f9c655+100 */ background: #f77624; /* Old browsers */ background: -moz-linear-gradient(left, #f77624 0%, #f9c655 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #f77624 0%,#f9c655 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #f77624 0%,#f9c655 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77624', endColorstr='#f9c655',GradientType=1 ); /* IE6-9 */ } .wrapper { width: 95vw; height: calc(95vw * 9/16); max-height: 95vh; max-width: calc(95vh * 16/9); background: center; background-size:contain; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #lorem { color: aqua; font-size:10vmin; text-align:center; position:absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; margin:auto; } 

 <div class="wrapper"> <p id="lorem"> This text should scale with div only. </p> </div> 

創建的示例： https : //jsfiddle.net/70fq44sv/5/

Answer 2

僅供參考。

可以將SVG用於漸變背景。 所有現代瀏覽器都支持它。

您可以查看SVG背景的來源，以查看其在MDN創建的此實時示例中的結構

它們可以很好地擴展，並且不需要瀏覽器前綴。

在下面的示例中，我創建了一個SVG，然后將其編碼為base64，以消除附加的http request

 .cooldiv { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAlIiB4Mj0iMTAwJSIgeTE9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agc3R5bGU9InN0b3AtY29sb3I6IHJnYigyMjEsMTUwLDg2KTsiIG9mZnNldD0iMCIvPjxzdG9wIHN0eWxlPSJzdG9wLWNvbG9yOiByZ2IoNTIsMTI3LDE0OSk7IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHN0eWxlPSJmaWxsOiB1cmwoI2cpOyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==); width: 100vw; height: 100vh; } 

 <div class="cooldiv"></div>