Css как поставить картинку на фон
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
Синтаксис
| CSS2.1 |
| CSS3 |
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundImage
Браузеры
Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации.
Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.
Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Если фон задаётся для строки таблицы (тег <tr> ), то Chrome, Safari, iOS отображают его не так, как предписывает спецификация, а именно для каждой ячейки отдельно. В то время как браузер должен показывать цельный фон для всего ряда. В примере 2 приведён код демонстрирующий ошибку.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).
Фон в CSS – памятка для начинающих
При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом.
Какими способами и методами можно задавать фон в CSS?
Работа с фоном в CSS
С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега <body>. Рассмотрим все свойства, которые связаны с заданием фона.
background-color
Задаёт цвет фона. Его можно применять как к отдельным элементам <h2>, <p>, так и ко всему веб-сайту с помощью тега <body>.
background-image
Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.
Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.
background-repeat
Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.
Оно может иметь несколько значений:
- background-repeat: repeat-x — повторение по горизонтали;
- background-repeat: repeat-y — повторение по вертикали;
- background-repeat: repeat — повторение и по горизонтали и по вертикали;
- background-repeat: no-repeat — изображение не повторяется.
Например, повторение по горизонтали выглядит так:
background-attachment
Это свойство определяет фиксирование фонового изображения при скроллинге:
- background-attachment: scroll — фон прокручивается вместе со страницей;
- background-attachment: fixed — фон остаётся неподвижным.
background-position
Данное свойство определяет расположение фоновой картинки относительно экрана. Значения свойства представляют собой набор вертикальных и горизонтальных координат, отсчет которых начинается с верхнего левого угла.
Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .
- background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
- background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:
gradient
Плавный переход от одного цвета к другому, причем переходов допускается несколько.
Использование градиента можно наглядно продемонстрировать в примере кода:
Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.
Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.
Работа с размером фона в CSS
В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.
Существует несколько способов, позволяющих определить размер:
Абсолютное изменение размера
Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.
Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:
Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.
Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:
Относительное изменение размера
Если применять проценты, размер будет основываться не на изображении, а на элементе.
То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.
Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.
Масштабирование до максимального размера
В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.
Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.
Такой фон страницы будет автоматически подгоняться под любое разрешение:
Заполнение фоном
Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.
В том случае, если соотношения сторон различаются, картинка обрежется:
Масштабирование сразу нескольких фонов
Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:
Создание полупрозрачного фона в CSS
Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.
Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.
Пример создания полупрозрачного блока:
Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.
В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.
Пример задания прозрачного фона:
Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!
Основы работы с фоном
Самое простое, что может быть при работе с фоном — это заливка фона элемента одним цветом. Это делается с помощью свойства background-color, которое принимает те же значения, что и хорошо известное вам свойство color.
Давайте зальем блок зеленым фоном (цвет текста при этом сделаем белым):
Так код будет выглядеть в браузере:
Блок . Свойство background-image
Свойство background-image задает фоновую картинку. Делается это следующим образом: background-image: url(«путь к картинке»).
Путь к картинке обычно берут в кавычки (двойные или одинарные), но можно также и без них.
Давайте в качестве фона блоку зададим следующую картинку:
Смотрите, что у нас получится — наша картинка размножится по всему блоку, замостит его:
Так код будет выглядеть в браузере:
Блок . Свойство background-repeat
Как вы уже видели, по умолчанию фоновая картинка мостит собой весь блок. Однако, это поведение можно поменять с помощью свойства background-repeat.
Оно позволяет делать следующее: если задать значение no-repeat, то картинка вообще не будет повторяться, если задать значение repeat-x — будет повторяться по оси X (то есть по горизонтали), а если repeat-y — картинка будет повторяться по оси Y (по вертикали).
Ну, а значение repeat задает поведение по умолчанию — картинка будет повторяться по всем осям.
Давайте посмотрим, как работает это свойство.
Значение no-repeat
Давайте свойству background-repeat зададим значение no-repeat — в этом случае картинка не будет повторяться вообще и станет в верхний левый угол:
Так код будет выглядеть в браузере:
Значение repeat-x
А теперь зададим значение repeat-x — фоновая картинка станет повторяться по горизонтали:
Так код будет выглядеть в браузере:
Значение repeat-y
Ну, а теперь сделаем так, чтобы картинка повторялась по вертикали, задав свойству background-repeat значение repeat-y:
Так код будет выглядеть в браузере:
Блок .
Свойство background-positionКогда мы рассматривали свойство background-repeat, я обращал ваше внимание на то, что по умолчанию фоновая картинка располагается в левом верхнем углу. Однако, это поведение можно поменять с помощью свойства background-position. Оно позволяет расположить фоновую картинку в любом удобном нам месте элемента.
Данное свойство имеет два значения, которые пишутся через пробел: сдвиг фона по горизонтали и сдвиг фона по вертикали. Собственно сдвиг можно задавать ключевыми словами, а можно пикселями или процентами.
Сдвиг фона ключевыми словами
С помощью ключевых слов можно двигать фон по горизонтали и по вертикали, но не в любое место, а в определенные позиции. К примеру, по горизонтали фон можно поставить слева (значение left), справа (значение right) и по центру (значение center), а по вертикали — сверху (значение top), по центру (значение center) и снизу (значение bottom).
Чтобы указать позицию фона, нужно написать, где он должен быть по горизонтали, а где по вертикали.
К примеру, значение right bottom, поставит фон в правый нижний угол, значение left bottom — в левый нижний угол, а значение left center — поставит фон по центру слева. Если вы хотите поставить фоновую картинку по центру всего блока — напишите center center. При этом можно использовать сокращенный вариант — не писать слово center два раза, а указать его один раз.
Давайте изучим следующие примеры, чтобы увидеть как это работает на практике.
Поставим для свойства background-position значение right bottom — правый нижний угол:
Используйте CSS для позиционирования фонового изображения background-position
ОтзывыКогда мы изучаем стили других веб-сайтов, мы часто сталкиваемся с ситуацией, когда одна и та же картинка вызывается во многих атрибутах фона, чтобы соответствовать использованию различных частей веб-страницы.
Откройте эту картинку и посмотрите, вы увидите, что эта картина содержит много маленьких картинок;
Другой пример:
Эти маленькие картинки являются частями после разделения всей картинки. Поместите части на картинку, а не храните их как отдельные картинки. Все мы знаем цель.Это уменьшить количество http запросов, экономя время и пропускную способность。
Итак, как понять, что картинка отображает только ее часть в разных местах, в которой используется проблема позиционирования фоновой картинки, о которой мы поговорим сегодня. Я считаю, что многие люди были в депрессии по поводу этой проблемы, и друзья часто спрашивают меня, поэтому я буду систематически говорить об этом сегодня:
Мы знаем, что при использовании изображений в качестве фона,CSS должно быть написано так，Возьмите контейнер div в качестве примера, он также может быть фоном body, td, p и т. Д. По той же причине.
Код: div{ background:#FFF url(image) no-repeat fixed x y;} |
Значения свойств фона здесь следующие:
#FFF Цвет фона:(Значение цвета, если фоновое изображение не покрыто, или цвет фона, когда фоновое изображение отсутствует)
image Фоновая картинка:(Вот адрес картинки)
no-repeat Следует ли повторять:(Когда изображение меньше, чем размер контейнера, изображение будет располагаться несколько раз, чтобы заполнить контейнер по умолчанию.
fixed Прокручивается ли фон с контейнером:(Есть два необязательных значения: прокрутка с прокруткой, фиксированная не прокручивается, по умолчанию используется прокрутка)
x y Расположение фонового изображения:(Обратите внимание, что только позиционирование без повтора имеет смысл. Это тема сегодняшнего разговора)
Нам нужно прояснить некоторые моменты в позиционировании фонового изображения:
1. Перед двумя значениями находится горизонтальное позиционирование, которое мы называем позиционированием по оси X. Последнее значение — вертикальное позиционирование, которое мы называем позиционированием по оси Y. Если имеется только одно значение, по умолчанию используется направление оси x, тогда в направлении оси y по умолчанию используется выравнивание по центру сверху вниз, то есть по центру.
2. Начало координатной оси соответствует контейнеруЛевая вершина。
3.
Стрелка оси Y этой координаты направлена вниз, то есть значения x y в правом нижнем углу (внутри контейнера) все положительные.
5. Значение x y может быть выражено в процентах или px.
6, x y также может быть представлен пятью выравниваниями «влево, вправо, сверху, снизу, по центру», но обратите внимание: при выражении «слева, справа, сверху, снизу, по центру»,Правила выравнивания применяются вместо правил координат, x для левого означает, что левая часть изображения выровнена по левому краю контейнера, когда вправо означает, что правая часть по изображению выровнена по правому краю контейнера, когда y — это верхняя часть означает, что верхняя часть изображения выровнена с верхом контейнера, когда нижняя часть — это изображение Дно совмещено с дном контейнера, и если xy равно центру, это указывает на выравнивание по центру.
7. Когда x y выражается в процентах или px, его значение может быть отрицательным числом. Мы можем легко понять значение отрицательных чисел, применяя правила координат. Когда x отрицательный, это означает, что левая вершина изображения находится слева от левой вершины контейнера, а когда y отрицательный, это означает, что левая вершина изображения находится выше левой фиксированной точки контейнера. То есть слева и вверх за пределы контейнера.
Ниже я использую несколько иконок, чтобы проиллюстрировать несколько ситуаций, Синий блок обозначает изображение, а пунктирная рамка обозначает контейнер (может быть div, td или непосредственно тело). Обратите внимание, что мы можем видеть только фоновое изображение в контейнере. Я использую белый, чтобы указать видимую часть, и за пределами диапазона контейнера невидимо Я использую серый. Координаты левой фиксированной точки контейнера: (0, 0).
Первое, фоновое изображение выровнено по верхнему левому краю содержимого, 0px 0px также можно записать как левое верхнее
Второе изображение, фоновое изображение находится в середине контейнера, координаты фиксированной точки положительны
Третье изображение, часть фонового изображения находится в левом верхнем углу контейнера, координаты фиксированной точки отрицательны
—————————————————————————
На этом этапе мы можем понять, как использовать значение позиционирования на заднем плане для точного определения местоположения фонового изображения.
Вернемся к двум картинкам, представленным в начале. Мы можем использовать его: фоновое позиционирование и эти два видны в контейнере. Природа приходит, чтобы назвать часть всей картины по желанию.
Однако для удобства вызова мы должны обратить внимание на несколько правил при размещении этих небольших изображений, например: расстояние между маленькими изображениями обычно равно размеру контейнера, вызывающего маленькое изображение, или расстояние немного больше, чтобы избежать его отображения в контейнере. Покажите фотографии, которые мы не хотим показывать!
Кроме того, если при позиционировании используется процент, алгоритм является особенным. Позвольте мне привести пример:
Код: background:#FFF url(image) no-repeat fixed 50% -30%; |
В это время, где изображение должно находиться в контейнере, формула алгоритма выглядит следующим образом:
Координатная позиция левой вершины рисунка от левой вершины контейнера равна
х: (ширина контейнера-ширина картинки) х50%
у: (высота контейнера-высота картинки) х (-30%)
Полученные результаты применяются к закону координат.
Если разница отрицательная, а процент положительный, результат операции отрицательный. Если разница отрицательная, а процент отрицательный, то результат операции положительный. Короче говоря, расчет здесь в соответствии с алгоритмом. Положение изображения можно получить, приведя результат операции в закон координат.
Например: ширина контейнера: 600 пикселей, высота: 600 пикселей, а ширина изображения: 200 пикселей, высота: 200 пикселей;
Используя вышеприведенный стиль, мы можем получить расположение изображения как:
x：(600px-200px)*50%
y：(600px-200px)*(-30%)
Как показано ниже:
Возьмите верхний левый угол в качестве начала координат
Добавьте, что вам нужно отобразить картинку 40PX слева и 10PX сверху <DIV CLASS = «m»> </ div>
.m{ background:url(img/01.jpg) no-repeat;background-position:-40px -10px}
Пожалуйста, поймите это передо мной.
Объясните это предложение
background-position:-40px -10px
Фон хочет сместить 40 пикселей влево и 10 пикселей вверх
Столь же большой, как м, изображение будет отображаться
Справочные материалы:
http://www.jb51.net/css/23213.html
http://hi.baidu.com/xinliang211/blog/item/2742802e360ea55d4fc226b3.html
33 — Как создать фоновое изображение CSS в Dreamweaver
Привет, меня зовут Дэн. В этом видео мы рассмотрим фоновые изображения. Теперь есть два способа добавления изображений в Dreamweaver. Один из способов, который мы делали ранее, когда мы просто поместили курсор в нужное место, добавили его, и изображение оказалось в нашем HTML. Если я нажму здесь на этого парня и перейду к «Исходный код», вы увидите его здесь, он здесь внутри этой колонки, и он здесь настоящий, его зовут graphic-old-books.jpg, у него есть какой-то альт. текст. Помните, замещающий текст предназначен для того, чтобы люди с нарушениями зрения могли видеть и читать или, по крайней мере, быть прочитанными, что находится на странице.
И это отлично подходит для нашего веб-сайта и отлично подходит для Google. Google это нравится.
Теперь есть еще один способ добавления изображений, это фоновые изображения. Он имеет немного другой эффект и не подходит для браузеров с точки зрения программ чтения с экрана. Итак, давайте посмотрим на это. Я вернусь к просмотру в режиме реального времени. Мы собираемся сделать это с этой серой коробкой на заднем плане нашего «группового героя». Итак, в файле Photoshop, вы можете видеть это красивое большое изображение на заднем плане, которое я хочу использовать. Чтобы сделать это, я не могу поместить изображение на входной текст поверх него, это действительно большая проблема с кодами. Итак, самое простое — найти нашего «группового героя» в css. Что мы собираемся сделать, так это спуститься на задний план. И фоновый цвет, который мы собираемся оставить, не должен исчезать, но мы собираемся использовать этот, называемый фоновым изображением. Я нажму на «url», и мы нажмем маленькую кнопку «Обзор».
Нажмите еще раз, кнопку «Обзор» еще раз. И я собираюсь прокрутить до своего «Рабочего стола», перейти к «Файлы упражнений Dreamweaver», перейти к «Изображениям», и здесь есть фон, здание. Вот он, хороший большой.
Я сделал это в своем учебном курсе Photoshop. Если вы хотите пойти и сделать такую графику, где мы ее размыли, добавили немного шума, это делается в отдельном курсе. Так что ознакомьтесь с моим курсом Photoshop для веб-дизайна.
Итак, мы создали его, давайте нажмем «Открыть». Здесь он ушел в фоновом режиме, давайте посмотрим на него в браузере. На данный момент он в полном размере и находится там на заднем плане. И это нормально, вы можете полностью оставить это как есть. Проблема в том, что подойдите к мобильному телефону, и вы едва сможете разобрать, что находится на заднем плане. Итак, что мы собираемся сделать, так это использовать небольшую приятную опцию в css. Это называется «Размер». Мы собираемся изменить его на «Обложка». Это «Установить на автоматический режим», полностью помещает его туда.
Мы собираемся установить его на «Обложку». Что это делает, так это… следите за фоном, когда я корректирую эти стороны. Поэтому, если я делаю его меньше, он подстраивается в зависимости от размера. Что делает Cover, он пытается подогнать высоту или ширину, в зависимости от того, что наступит раньше. Поэтому, если я проверяю в своем браузере, в этом случае он использует ширину, растягивая ее, но она становится меньше, пока не останется ни одной высоты, а затем оставит ее заблокированной. Таким образом, он просто растянется, чтобы убедиться, что он на 100% покрывает фон. Он очень хорошо работает с фоновыми изображениями.
Теперь проблема с использованием этого, я думаю, вместо того, чтобы просто помещать его как объект, заключается в том, что если я посмотрю на свой HTML, я щелкнул «банд-герой» и перешел к «просмотр кода». ‘, есть герой группы, здесь нет упоминания об имидже. Так что люди, использующие программу чтения с экрана, никогда не увидят это изображение, потому что оно представлено в css, который был здесь отдельным файлом.
Если я найду здесь героя группы, его представят здесь. Для него нет замещающего текста, и программа чтения с экрана его не произносит. Так что это дополнительный файл, который игнорируется программами чтения с экрана. Поэтому, если вам нужны изображения, которые должны быть частью вашего веб-сайта и считываться, а также использоваться поисковыми системами, это должен быть реальный физический объект. Что касается фонового изображения, нет никакой реальной причины считывать их именно так, как выглядит фоновое изображение. Это всего лишь их очки стиля.
Вот как установить фоновое изображение в Dreamweaver. Теперь убедитесь, что я не собираюсь делать это снова на видео, идите и сделайте резервную копию вашего сайта. Увидимся в следующем.
Как с помощью HTML/CSS добавить фоновое изображение в сообщение электронной почты?
Задавать вопрос
спросил
Изменено 6 лет, 1 месяц назад
Просмотрено 5к раз
Я пытался заставить фоновые изображения работать в HTML-коде электронной почты, но безуспешно.
Я использую Outlook 2007 для проверки своего HTML-кода.
Мой метод:
- Создать мой файл .htm
- Сохраните его в %appdata%\Microsoft\Signatures
- Создайте новое электронное письмо и установите этот HTM-файл в качестве моей подписи
До сих пор все мои попытки добавить фоновое изображение не увенчались успехом, и я начинаю думать, что это невозможно. Любые идеи?
- электронная почта
- изображения
- html
- css
- подпись электронной почты
3
Вот интересный URL-адрес, который должен помочь вам понять, какие функции HTML поддерживаются различными веб-почтами и, соответственно, настольными клиентами:
http://www.webknowhow.net/dir/HTML/CSS/0607CSSSupportineMail.html
2
Полный ресурс здесь:
http://msdn.microsoft.com/en-us/library/aa338201.
