Как фоновое прикрепление: исправлено в div, а не в окне просмотра
У меня большая фоновая обложка.
<div id="cover">
...
</div>
И CSS
#cover {
background:url('cover.jpg') no-repeat fixed center center / cover;
height: 350px;
width: 100%;
}
Ожидаемый результат: фоновое изображение, измененное до 350px x 100% (в моем случае 350x900), должно иметь эффект прокрутки, основанный на <div id="cover"></div>,
Фактический вывод: фоновое изображение, измененное в размер области просмотра (в моем случае 1440x900), имеет эффект прокрутки, основанный на <html></html>,
То, что я хочу, для background-attachment: исправлено, чтобы быть относительным к div, а не к области просмотра.
1 ответ
Фоновые изображения по умолчанию "привязаны" к элементу, к которому они прикреплены. Когда вы устанавливаете фоновое свойство CSS в значение fixed, оно делает то же самое, что и для элемента DOM, оно фиксирует его в отношении всего документа (область просмотра).
Изменение фиксированного свойства для прокрутки должно сработать здесь:
background:url('cover.jpg') no-repeat scroll center center / cover;