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

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?