im trying to get this gradient to work in Firefox
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,transparent),color-stop(50%,transparent),color-stop(50%,$panda), color-stop(100%,$panda)); /* Chrome,Safari4+ */
I've tried with this, but no luck ?
background: linear-gradient(to bottom, #fff 0, #fff 50%, $panda 100%);
Depending on your version of Firefox, you may have to use the prefix -moz
when using background linear-gradients.
Here's a general example:
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The Mozilla documentation would have more examples on how to render these gradients in Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Also, refer to a nice handy resource here that I generally use: http://css3please.com/
You can try these:
background: -moz-linear-gradient($panda, transparent);
background-image: linear-gradient(to bottom, #FFF 0, #fff 50%, $panda 100%);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.