Создание полноэкранного фонового изображения с использованием CSS
Полноэкранное фоновое изображение очень нужно для создания портфолио или сайта с фотографиями. Обычно для этого используется плагин jQuery, который изменяет размер изображения на подходящий для окна браузера и проводит необходимые вычисления, чтобы изображение соответствовало странице по ширине и высоте.
Но знаете ли Вы, что если Вам не нужно поддерживать очень старые версии браузеров, такие как Internet Explorer версии 8 и ниже, то можно создать этот замечательный эффект с помощью строки кода CSS? И сейчас мы расскажем, как именно это можно сделать.
Демонстрация работы – Скачать исходный код
Свойство размера фона
С помощью свойства размера фона можно задать элементу, какого размера должно быть его фоновое изображение. Для этого используется следующая запись:
#elem{
background:url('kermit.jpg') center center no-repeat;
background-size:100px 150px;
}Но что еще более удобно, это свойство поддерживает два волшебных значения — contain и cover:
- Значение contain (содержать) меняет размер фонового изображения так, чтобы оно полностью поместилось в элемент;
- Значение cover (накрывать) более интересно — оно делает так, чтобы весь фон элемента был накрыт изображением.
Размер изображения меняется на наименьшей, позволяющий накрыть элемент полностью. Посмотрите на пример ниже. Это значение будет использовано для полноэкранного фонового изображения.
Размер изображения меняется на наименьшей, позволяющий накрыть элемент полностью. Посмотрите на пример ниже. Это значение будет использовано для полноэкранного фонового изображения.Значения размера фона contain и cover
Так что все, что нам нужно сделать, — задать изображение, которое мы хотим показывать на полный экран, фоновым изображением элемента html:
html{
/* Это изображение будет выводиться на полный экран */
background:url('background.jpg') no-repeat center center;
/* Чтобы гарантировать, что элемент html всегда будет полной высоты окна браузера */
min-height:100%;
/* Волшебство */
background-size:cover;
}
body{
/* Обходной путь для некоторых мобильных браузеров */
min-height:100%;
}И теперь изображение выводится на полный экран. Оно будет меняться в размерах при изменении размера окна или ориентации мобильного устройства. Это свойство поддерживается всеми современными и многими устаревшими версиями браузеров, как настольных, так и мобильных, даже таких, как Internet Explorer, начиная от версии 9.
Благодарим Zanthia за замечательное изображение.
Автор урока Martin Angelov
Перевод — Дежурка
Смотрите также:
- Многослойные эффекты с использованием свойств CSS геометрии обрезки, фильтров и режимов наложения
- Создание улучшенных фонов с помощью режима наложения
- Использование свойства CSS тени блока
- Опубликовано в css, июля 9, 2016
Tweet
�
Комментарии
[an error occurred while processing the directive]
css установить фоновое изображение для растягивания на весь экран без повторения
Теги: полноэкранный
Нечего и говорить, прямо над изображением мы указываем только ширину и высоту 100%, такая ситуация появится
<template>
<div></div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {};
}
};
</script>
<style scoped>
.
hello {
background: url("../../../static/imagic/sy.jpg") no-repeat;
height: 100%;
width: 100%;
background-size: cover; // Полноэкранный режим
}
</style>
Фон: url («../../../ static / imagic / sy.jpg») —— Местоположение пути изображения;
no-repeat—— Изображение не повторяется;
center 0px —— center — это позиция с левой стороны страницы, 0px — позиция с верхней части страницы;
background-position: center 0—— расположение изображения, там же;
background-size: cover; —— Увеличьте фоновое изображение, чтобы оно было достаточно большим, чтобы фоновое изображение полностью покрыло область фона. Некоторые части фонового изображения могут не отображаться в области позиционирования фона;
min-height: 100vh; —— Высота окна. «Область просмотра» означает размер видимой области внутри браузера, а именно window.innerWidth / window.innerHeight.
Интеллектуальная рекомендация
таблица часто задаваемых вопросов (постоянно обновляется)
1.
TABLE Cell Wrap автоматически: Когда число на английском, TD в TABLE будет растянут и не будет автоматически переноситься. Это нормально под полным углом. Решение первое: Однак…
Некоторые проблемы с многопоточной реализацией
Черепаха RAM. В сказке, есть трюк в ярости Tortoise, и кролик по дороге на отдых в три раза, а черепаха пытается броситься, чтобы выиграть игру, так как для завершения таких проблем многопоточности? К…
10-Играйте со структурой данных-Trie
В этой главе мы представляем префиксное дерево дерева словарей Trie. Правильное произношение — Дерево, чтобы различать Дерево E; Реальный случай Microsoft: поиск в адресной книге портативных устройств…
Параметр приема SPRINGMVC и отношения контента
1. Около трех контуров Здесь в основном вводит три видаContent-Type： 1.1、 multipart/form-data Запрос может быть передан как файлы, так и может нести параметры. Параметры передаются в ключевой паре зна…
Конструированная система мониторинга с использованием графана
Ubuntu Получить установочный носитель по следующей команде Непосредственно распакованный Измените информацию по умолчанию.
Port по умолчанию. Начните службу Grafana, а затем доступа к вышеуказанному а…
Вам также может понравиться
excle2007
， ， github easyexcle， ， lib ， ， poi Окружающая обстановка poi3.12 2. excle xml ， poi xml excle 。 Event modelа такжеUser model ， ， ， xml （excle ） 。 ， sheet，row，cell ， ， ， excle 。 3. poi Event model XSS…
Excel общие функции времени
1. Извлечь дату из времени Функция даты: ДАТА (ГОД (), МЕСЯЦ (), ДЕНЬ ()) время функция Дата (Результат) 2018/12/13 16:41:20 =DATE(YEAR(A2),MONTH(A2),DAY(A2)) 2018/12/13 2. Неделя расчета Недельная фу…
Запись по решению задач: математика для шестого класса
тема: In sixth grade, students are presented with different ways to calculate the Least Common Multiple (LCM) and the Greatest Common Factor (GCF) of two integers. The LCM of two integers a and b is t…
Пользовательский фильтр 2016.12.17.
Журнал журнала Режим отладки, журнал журнала появляется предупреждение Используйте пользовательские фильтры Создайте фильтр под компонентами, унаследованными в Yii \ base \ ActionFilter Используйте по.
..
[Минимальное генерирующее дерево] Отчет о проблеме проблемы с проблемой NewStart
【Название Описание】 Конечно, у горнодобывающей промышленности сначала должны быть шахты. Маленький Ф.Ф. потратил тысяку богатства, полученных из последнего приключения, попросив людей копаться в порт …
HTML фоновое изображение Адаптивное полноэкранное изображение, учебник html
Учебник HTML » Фоновое изображение HTML полноэкранное адаптивное
В следующем примере показано полноэкранное адаптивное фоновое изображение. Создавая фон веб-страницы, мы будем использовать следующие атрибуты CSS:
background: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg ) фиксированный центр неповторяющегося центра;
-webkit-background-size: 9крышка 0004;
-moz-background-size: обложка;
-o-background-size: обложка;
background-size: обложка;
Синтаксис:
Синтаксис: Внешний CSS.
фон: значение ;
-webkit-background-size: значение ;
-moz-background-size: значение ;
-o-background-size: значение ;
размер фона: значение ;
Примечание. вместо этого используйте внешний CSS.
Вы можете попробовать выполнить следующий код.
Пример:
Пример 1. Как создать полноэкранное фоновое изображение HTML
<голова>
<стиль>
тело, html {
/* Аккуратно центрируем и масштабируем изображение */
фон: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg) исправлен центр без повторов;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
размер фона: обложка;
}
.текст {
цвет: #EEE;семейство шрифтов: Verdana, Geneva, без засечек;
размер шрифта: 18px;
вес шрифта: полужирный;
отступ: 26px;
}
.текст2 {
цвет:#999;
семейство шрифтов: Verdana, Geneva, без засечек;
размер шрифта: 18px;
вес шрифта: полужирный;
отступы: 1000 пикселей;
отступ справа: 26px;
нижний отступ: 26px;
отступ слева: 26px;
}
<тело>
<дел>
В этом примере создается фоновое изображение на всю страницу. Попробуйте изменить размер окна браузера, чтобы увидеть, как оно всегда будет занимать весь экран
В этом примере создается фоновое изображение на всю страницу. Попробуйте изменить размер окна браузера, чтобы убедиться, что оно всегда занимает весь экран (при прокрутке вверх) и хорошо масштабируется на всех размерах экрана.
<дел>
В этом примере создается фоновое изображение на всю страницу.
Попробуйте изменить размер окна браузера, чтобы увидеть, как оно всегда будет занимать весь экран