以下代碼的Opera和IE替代品是什么？background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));background-image: -moz-linear-gradient(right, #0C93C0, #FFF);注意，我已經測試了以下規則。所有瀏覽器都支持它們。但是它們是垂直漸變。誰能幫我將它們修改為水平的？background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); background-image: -moz-linear-gradient(top, #0C93C0, #FFF); background-image: -ms-linear-gradient(top, #0C93C0, #FFF); background-image: -o-linear-gradient(top, #0C93C0, #FFF); background-image: linear-gradient(top, #0C93C0, #FFF);
3 回答
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
這是一個示例，可與Opera，Internet Explorer和許多其他Web瀏覽器一起使用。如果瀏覽器不支持漸變，它將顯示正常的背景色。
background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
我已經從這個網站上偷了這個。微軟在這里建立了自己的發電機。
四季花海
TA貢獻1811條經驗 獲得超5個贊
Rob W的答案很全面，同時又很冗長。因此，我想總結一下2014年末支持當前瀏覽器的內容，同時確保一些向后兼容，只剩下IE6 / 7無效的呈現線性漸變和早期Webkit的功能（Chrome1-9，Saf4 -5特殊方式（-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );）
標準語法已從開始的漸變位置更改為to direction，例如background-image: linear-gradient( to bottom, #0C93C0, #FFF );
廣泛支持的，易于閱讀的CSS：
background-color: #8BCCE1; /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */
background-image: -webkit-linear-gradient( top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image: -moz-linear-gradient( top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image: -o-linear-gradient( top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image: linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */
一個有趣的事實是，網絡上的大多數博客文章和瀏覽器漸變工具，例如著名的ColorZilla的“ Ultimate CSS Gradient Generator ”，都包含MS供應商前綴的-ms-linear-gradient值。
從Internet Explorer 10消費者預覽版開始支持。但是，當您包括標準值時linear-gradient，Internet Explorer 10 Release Preview會適當地呈現它。
因此，通過包含-ms-linear-gradient和使用標準方式，-ms您實際上可以解決IE10 Consumer Preview，這歸結于您的受眾中沒有人。
- 3 回答
- 0 關注
- 728 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消