Кроссбраузерной CSS для фонового изображения с линейным градиентом

Question

У меня есть некоторые CSS, чтобы поместить фоновое изображение в DIV с линейным градиентом, как так:

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,.15)), url(image.jpg); 
background-position: center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Но ничего не показывает вообще на IPad или iPhone. Я рассмотрел еще несколько вопросов (Background image not showing on iPad and iPhone, CSS gradient not working on iOS), но не смог их собрать.

Как я могу это достичь?

Answer 1

Проблема, скорее всего, в том, что вы не используете правильный префикс для браузера. Хотя вы используете префикс для фона, линейный градиент также требует префикса для разных браузеров. Вы можете проверить советы W3Schools для градиентов CSS, и вы также можете проверить Safari Developer's Guide на использовании градиентов CSS. Ниже приведен краткий пример различных префиксов линейного градиента.

-webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */ 
    -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */ 
    -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ 
    linear-gradient(red, green, blue); /* Standard syntax */