Подтвердить что ты не робот

Размер фона: обложка внезапно перестала работать в Google Chrome?

Есть ли у кого-нибудь еще эта проблема? Я создаю сайты для жизни, а некоторые используют использование свойства css background-size: cover. Внезапно около недели назад все сайты с этим свойством больше не отображались прямо в Google Chrome. (все остальные браузеры работают нормально.) Кто-нибудь еще испытывает это? Это просто MY google хром или что-то изменилось? Потому что фон отображался правильно примерно до недели назад, и я ничего не менял. Они просто перестали нормально отображаться, казалось бы, из ниоткуда....

4b9b3361

ОТВЕТЫ

Ответ 1

Лучшая практика: всегда сначала устанавливайте фоновое изображение, а затем - размер фона.

Ответ 2

Вам нужно только использовать! important:

background-size: cover !important;

Ответ 3

Я тоже столкнулся с этой проблемой в Chrome.

Ни один из вышеперечисленных ответов не работал у меня. В частности, я пытался установить фон элемента <body> на background-size: cover. Однако фоновое изображение никогда не будет растягиваться вертикально, чтобы заполнить страницу.

После некоторых проб и ошибок я обнаружил, что установка ширины и высоты элемента <html> на 100% устраняет проблему в Chrome. (Для того, что стоило, изменение ширины и высоты элемента <body>, казалось, не имело эффекта.)

В моем css у меня есть следующие правила, чтобы исправить проблему:

html {
  width: 100%;
  height: 100%;
}

Ответ 4

Ниже приведено решение проблемы, но это не будет для всех. Я считаю, что это решение поможет меньшинству людей, испытывающих проблему автора.

Опция background-size может перестать работать в chrome, если ваш контейнер слишком мал, по вертикали, по сравнению с фоновым изображением.

Я был в ситуации, когда мне пришлось позиционировать небольшую часть большого фонового изображения через div, который был высотой 7 пикселей.

В отладчике Chrome изменение высоты div до 9 пикселей "привязано" к размеру фона.

Мое окончательное решение состояло в том, чтобы перестроить мои div, чтобы я не столкнулся с этой проблемой.

Чтобы узнать, поможет ли это решение в отладчике Chrome, увеличьте свой div. Если в какой-то момент фоновая защелка встанет на место, то вы знаете, что это проблема.

Ответ 5

Старый вопрос, но имеет аналогичную проблему, и оказалось, что мне нужно добавить и &nbsp; в пустой div, который я применял background-size: cover to.

Ответ 6

Вы должны сделать CSS-хаки для google chrome.

Use body:nth-of-type(1) .elementOrClassName{property:value;}

только для google chrome.

для вашего случая,

nth-of-type(1) .elementOrClassName{background-size:80px 60px;}

Ответ 7

У меня была такая же проблема внезапно с не только GC, но и FF и Opera. я использовал php-функцию, чтобы вытащить случайные изображения для моего фона, и это то, что у меня было....

CSS

.main-slideshow .video img  {   
  cursor:pointer;
  width:550px !important;       
  height:340px !important;   
  background-repeat: no-repeat; 
  -moz-background-size:cover;
  -webkit-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;   }

и HTML/PHP:

$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';

он работал несколько дней, и внезапно background-repeat и background-size перестали работать. так что сегодня утром я узнал, что следующие изменения отлично работают для GC (v21), FF (v14), Opera (v12) и Safari (v5.1.7)... по-прежнему не повезло с IE: (

CSS

.main-slideshow .video img  {   
  cursor:pointer;
  width:550px !important;       
  height:340px !important;   
  -moz-background-size:cover;
  -webkit-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;   }

HTML/PHP:

    $result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';

может быть это паршивое решение, но оно работает для меня (пока), надеюсь, это поможет кому-то:)

Ответ 8

Попробуйте это фон-размер: содержать;

Ответ 9

Для меня, после работы в Chrome, IE 8, IE 9:

.itemFullBg{
background:url('image/path/name.png') no-repeat;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;      
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
    (src='image/path/name.png',sizingMethod='scale');
}

Ответ 10

Вместо использования:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Использование:

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;