Question

我正在尝试在背景图像上添加径向渐变。它适用于Chrome和Firefox，但它不适用于Safari。我无法弄清楚原因。

这是我的css：

   #banner {
        background-attachment: scroll, scroll, scroll, fixed;
        background-color: #fff;
        background: radial-gradient(circle at 60% 30%, rgba(0,0,0,0.1), rgba(0,0,0,0.7)),url(../images/fond2.jpg) center left no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }

我尝试使用：

       background : -webkit-radial-gradient(circle at 60% 30%, rgba(0,0,0,0.1), rgba(0,0,0,0.7)),url(../images/fond2.jpg) center left no-repeat;

但它仍然无效。关于如何解决这个问题的任何想法？

谢谢！

Answer 1

CSS

 #banner {
    background-attachment: scroll, scroll, scroll, fixed;
    background-color: #fff;
  /* Safari 5.1 to 6.0 */
   background:-webkit-radial-gradient(60% 30%, closest-side,rgba(0,0,0,0.1),              rgba(0,0,0,0.7)); 
  /* For Opera 11.6 to 12.0 */
  background:-o-radial-gradient(60% 30%, closest-side,rgba(0,0,0,0.1), rgba(0,0,0,0.7));
  /* For Firefox 3.6 to 15 */
   background:-moz-radial-gradient(60% 30%%, closest-side,rgba(0,0,0,0.1), rgba(0,0,0,0.7));
  /* Standard syntax */
   background:radial-gradient(60% 30%, closest-side,rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

您还可以查看：http://www.w3schools.com/css/css3_gradients.asp或How do I combine a background-image and CSS3 gradient on the same element?

Answer 2

好的，事实证明问题来自'圈'。对于我必须使用的旧版Safari。

background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.7) 90%), url(../images/fond2.jpg) center left no-repeat;

这不是完全相同的效果，但它是一个很好的后备。

希望它有所帮助！

背景图像上的径向渐变在Safari上不起作用

2 个答案: