В чем разница между размером фона: обложка; и размер фона: 100%;?

Когда я устанавливаю свойство background-size из образа div в background-size: cover; или background-size: 100%;, оба выглядят одинаково.

В чем разница? Когда я должен использовать обложку и когда 100%?

Ответ 1

cover = Масштабировать фоновое изображение как можно больше, чтобы фоновая область была полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не отображаться в области фонового позиционирования

В основном, он масштабируется до тех пор, пока внутренние края не коснутся стороны, а это значит, что часть изображения может быть обрезана в отличие от 100%, где все изображение будет видимым.

См. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover, например

Ответ 2

здесь скрипка: http://jsfiddle.net/RS5kX/19/

background-size:100%;= background-size:100% auto;= ширина установлена на 100% больше, а высота фонового изображения соответствует соотношению сторон изображения.

background-size:cover; означает, что фоновое изображение всегда будет соответствовать целому div, вы не останетесь с пустыми местами в div

background-size:100% 100%

также не оставляет пустого пространства, но, конечно же, это искажает исходное соотношение сторон изображения

Ответ 3

Довольно уверенный размер фона: обложка; означает, что изображение будет заполнять элемент при сохранении его соотношения сторон, в то время как размер фона: 100%; будет просто сделать изображение заполнить 100% ширину элемента.