CSS линейный градиент не работает на iOS при сочетании с URL-адресом изображения в свойстве background - PullRequest
Новая
       80

CSS линейный градиент не работает на iOS при сочетании с URL-адресом изображения в свойстве background

0 голосов
/ 27 мая 2019

Я использую комбинацию линейного градиента и URL-адреса изображения в качестве фона на странице.Все это хорошо работает как на настольном компьютере, так и на мобильном устройстве (только для Android), но не работает для iOS (iPhone и iPad, протестировано на iOS 12) и отображает только один из цветов градиента.Вот CSS, который я использую: 

.green-background-image {
    background:-webkit-linear-gradient(to bottom, rgba(0, 139, 243, 0.9),rgba(72, 177, 0, 0.6)), url(background-min.jpg);
    background:linear-gradient(to bottom, rgba(0, 139, 243, 0.9), rgba(72, 177, 0, 0.6)), url(background-min.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-color:#498ca7;
    background-repeat: no-repeat;
    background-position: center center;
}

Я добавил префикс браузера для webkit, но это не имело никакого значения.

Вот несколько скриншотов на обоихкорпус (работает и не работает) Android screenshot iOS screenshot

1 Ответ

0 голосов
/ 03 июня 2019

Оказалось, проблема со свойством background-attachment.После того, как я добавил background-attachment: scroll; для размера экрана мобильного устройства, проблема была решена.

РЕДАКТИРОВАТЬ

Немного лучшее решение я нашел где-то (извините, не могу найти ссылку снова) это: 

@media only screen and (max-width: 786px){

    .green-background-image {
        background-image: none;
        background-repeat: no-repeat;
        background-attachment: inherit;
        background-position: inherit;
        background-size: inherit;
        background-position-y: auto;
    }

    .green-background-image{
        content:"";
        background-color: RGB(6, 134, 238);
        position:fixed;
        top:0;
        height:100vh;
        left:0;
        right:0;
        z-index:-1;
        background: linear-gradient(180deg,rgb(0, 139, 243),rgba(72,177,0,0.63)),url(background-min.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

}
...