代码之家 › 专栏 › 技术社区 › Capi Etheriel

如何在多个背景中使用供应商属性?

multiple-browsers linear-gradients css3 css

Capi Etheriel · 技术社区 · 15 年前

我想在css中使用多个背景,目前firefox 3.61、chrome/safari都支持css,据说是opera10.5(不在gnu/linux上运行)。它的工作很好,但我想使用线性梯度作为背景。它在firefox上可以工作,在chrome上完全不工作,但是我不知道如何使它同时工作同时 . 有什么线索吗? http://snook.ca/archives/html_and_css/multiple-bg-css-gradients 最接近我所需要的,但我还不能让它与chrome一起工作。

2 回复 | 直到 15 年前

tybro0103 15 年前

我不确定,但我猜Chrome还不支持这个。虽然一个元素上有多个背景图像和css渐变听起来不错,但我还是建议使用多个元素,每个元素有一个背景图像。出于某种原因,仍然有人使用IE,这是一个不友好的CSS3。

Capi Etheriel 15 年前

这对我有效。似乎将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*/

推荐文章