Background-size: обложка внезапно перестала работать в Google Chrome?

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

28
cover css css3 google-chrome

11 ответов

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

28

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

background-size: cover !important;
14

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

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

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

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

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

у меня внезапно возникла та же проблема не только с 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 (У5.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" />';

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

1

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

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

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

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

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

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

1

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

1

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

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

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

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

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

попробуйте это background-size: contain;

0

для меня следующее работало для 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');
}
0

вы можете исправить проблему, установив высоту тега. Например, если у вас есть страница с фоновым изображением, установите высоту тегов html и body в CSS, например:

html { height:100%;  min-height:100%;  } body{  min-height:100%;  }

надеюсь, что это помогает

0

вместо:

-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%;
-3