如何在多背景下使用Vendor Properties？
我想在css中使用多个背景，目前Firefox 3.61、Chrome/Safari、据说是Opera10.5（不能在gnu/linux上运行）都支持这些背景。它工作正常，但是我想使用线性渐变作为背景。它适用于 Firefox，但不适用于 Chrome，但我不知道如何让它同时适用于两者。。 有什么线索吗？ http://snook.ca/archives/html_and_css/multiple-bg-css-渐变 最接近我需要的，但我还无法让它与 chrome 一起使用。
I want to use multiple backgrounds in css, which are currently supported by Firefox 3.61, Chrome/Safari, supposedly Opera10.5 (doesn't run on gnu/linux). It is working fine, however i would like to use linear-gradients as a background. it works ok for Firefox, doesn't work at all with Chrome, yet i can't figure out how to make it work for both at the same time.
any clues?
http://snook.ca/archives/html_and_css/multiple-bg-css-gradients came the closest to match what i need, but i couldn't get it to work with chrome yet.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不太肯定，但我的猜测是 chrome 还不支持这一点。虽然一个元素上的多个背景图像和 CSS 渐变听起来不错，但我仍然建议使用多个元素，每个元素各有一个背景图像。由于某些原因，仍然有人使用对 CSS3 不友好的 IE。
I'm not positive, but my guess is that chrome just doesn't support that yet. Although multiple background images and css gradients on one element sure sounds nice, I would still recommend using multiple elements with one background image each. For some reason, there are still people out there who use IE which is not CSS3 friendly at all.
这对我有用。看来将 mozilla 放在 webkit 之后会使 webkit 承认背景图像的第二个参数的存在并取消其旧声明。所以我将 -moz 声明放在 -webkit 之前。
background-image: url("../images/block_stripe_bg.png"); /* for older browsers */ background-image: url("../images/block_stripe_bg.png"), -moz-linear-gradient(center top, white, #dddddd); /* works for mozilla, ignored by other browsers */ background-image: url("../images/block_stripe_bg.png"), -webkit-gradient(linear, center top, center bottom, from(white), to(#dddddd)); /* works for webkit, ignored by other browsers */ background-repeat: repeat; /* older browsers */ background-repeat: repeat, no-repeat; /* newer browsers should apply this to both backgrounds*/this worked for me. it seems that placing mozilla after webkit makes webkit acknowledge the existence of a second parameter for background-image and unset its older declaration. so i'm placing the -moz declaration before -webkit.
background-image: url("../images/block_stripe_bg.png"); /* for older browsers */ background-image: url("../images/block_stripe_bg.png"), -moz-linear-gradient(center top, white, #dddddd); /* works for mozilla, ignored by other browsers */ background-image: url("../images/block_stripe_bg.png"), -webkit-gradient(linear, center top, center bottom, from(white), to(#dddddd)); /* works for webkit, ignored by other browsers */ background-repeat: repeat; /* older browsers */ background-repeat: repeat, no-repeat; /* newer browsers should apply this to both backgrounds*/