以下代碼的Opera和IE替代品是什么？background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));background-image: -moz-linear-gradient(right, #0C93C0, #FFF);注意，我已經(jīng)測(cè)試了以下規(guī)則。所有瀏覽器都支持它們。但是它們是垂直漸變。誰(shuí)能幫我將它們修改為水平的？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貢獻(xiàn)2036條經(jīng)驗(yàn) 獲得超8個(gè)贊
這是一個(gè)示例，可與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%);
我已經(jīng)從這個(gè)網(wǎng)站上偷了這個(gè)。微軟在這里建立了自己的發(fā)電機(jī)。
四季花海
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
Rob W的答案很全面，同時(shí)又很冗長(zhǎng)。因此，我想總結(jié)一下2014年末支持當(dāng)前瀏覽器的內(nèi)容，同時(shí)確保一些向后兼容，只剩下IE6 / 7無(wú)效的呈現(xiàn)線性漸變和早期Webkit的功能（Chrome1-9，Saf4 -5特殊方式（-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );）
標(biāo)準(zhǔn)語(yǔ)法已從開(kāi)始的漸變位置更改為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+ */
一個(gè)有趣的事實(shí)是，網(wǎng)絡(luò)上的大多數(shù)博客文章和瀏覽器漸變工具，例如著名的ColorZilla的“ Ultimate CSS Gradient Generator ”，都包含MS供應(yīng)商前綴的-ms-linear-gradient值。
從Internet Explorer 10消費(fèi)者預(yù)覽版開(kāi)始支持。但是，當(dāng)您包括標(biāo)準(zhǔn)值時(shí)linear-gradient，Internet Explorer 10 Release Preview會(huì)適當(dāng)?shù)爻尸F(xiàn)它。
因此，通過(guò)包含-ms-linear-gradient和使用標(biāo)準(zhǔn)方式，-ms您實(shí)際上可以解決IE10 Consumer Preview，這歸結(jié)于您的受眾中沒(méi)有人。
添加回答
舉報(bào)
0/150
提交
取消