html — Фоновая картинка поверх изображения, накладываемого hover

Вопрос задан

Изменён 4 года 1 месяц назад

Просмотрен 4k раз

Для ссылки пункта-меню задана фоновая картинка

<div>
            <ul>
                <li><a href="">Каталог изображений</a></li>
             </ul>
        </div>​

при наведении мышки задано, что сверху накладывается другая картинка, и она перекрывает ту картинку, что задана бэкграундом http://jsfiddle.net/y8AJF/7/ . Подскажите, как сделать так, чтобы фоновая картинка пункта меню оставалась поверх того изображения, что накладывается hover’ом? Вносить изображение в теге img в ссылку не хотелось бы.

  • html
  • css

Почитайте про множественный background.

Можно тут http://habrahabr.ru/company/microsoft/blog/137705/ или тут http://htmlbook.ru/css/background-position

И поэксперериментируйте…

Или поменяйте условие

#nav ul  li:hover {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png') no-repeat;
}

5

в CSS есть такое свойство: z-index: [значение] отображает последовательность отображения элементов.

1

Несколько background можно указывать через запятую вот так:

url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat, url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png')  no-repeat;

#nav ul {
    display: inline-block;
    position: relative;
    z-index: 999;
    margin-top: 0;
    margin-left: 130px;
}
    
#nav ul  li {
    display: inline-block;
    list-style-type: none;
    width: 116px;
}

#nav ul  li a {
    display: inline-block;
    text-align: center;
    width: 116px;
    height: 145px;
    padding-top: 90px;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #5c5c5c;
}

#nav ul  li a.
 
 item1 {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
    position: relative;
    z-index: 9999;
}

#nav ul  li a:hover {
    background: 
    url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat, url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png')  no-repeat;
    width: 116px;
    height: 145px;
    color: #ffffff;
}
<div>
        <ul>
            <li><a href="">Каталог изображений</a></li>
         </ul>
    </div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

seodon.

ru | Учебник HTML — Изображения для фонов

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.

Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.

В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега <DIV> его не было. Сегодня я вам покажу способ, который можно применить абсолютно к любым HTML-тегам и опять мы используем стили (CSS), а точнее атрибут style.

Общий синтаксис такой:

<тег>…</тег>

Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега <BODY>.

А скажите мне, это значение style вам ничего не напоминает? Да-да, вы уже сталкивались с подобным в уроке по изменению цвета текста и фона, только там мы меняли просто фоновый цвет HTML-элементов. А теперь давайте соединим наши знания и запишем все это вместе:

<тег>…</тег>

Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. Вы спросите: «А для чего это делать, ведь браузер не сможет одновременно показывать фоновый цвет и фоновое изображение»? И будете совершенно правы! При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение — это рисунок в темных тонах, а цвет текста на странице вы сделали белым. И все отлично смотрится… Пока пользователь не отключит в браузере показ изображений. Тогда у него фон станет скорее всего белым, как и ваш цвет текста. Как говорится, без комментариев…

Поэтому всегда, слышите, ВСЕГДА указывайте фон-цвет и фон-изображение вместе, как показано в последнем варианте.

Пример создания фоновых изображений в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Фоновые изображения в HTML</title>
</head>
<body>
 <p>Созвездия в заоблачной дали<br>Раздумьям тщетным многих обрекли.<br>Одумайся, побереги рассудок -<br>Мудрейшие и те в тупик зашли.<br><b>Омар Хайам.</b></p>
</body>
</html>

Созвездия в заоблачной дали
Раздумьям тщетным многих обрекли.
Одумайся, побереги рассудок —
Мудрейшие и те в тупик зашли.
Омар Хайам.

В данном примере для фона я использовал вот это изображение: Если же будет отключен показ изображений, то фон станет просто черным.

Домашнее задание.

  1. Создайте заголовок статьи и шесть параграфов. Подчеркните текст заголовка и выделите его цветом #9999CC.
  2. Сделайте в последнем параграфе ссылку на любой сайт и установите на странице цвет #9999CC для ссылок при наведении курсора мыши.
  3. Установите на всей странице изображение-фон.
  4. Установите для всех параграфов другую картинку в качестве фона. Но сделайте так, чтобы у первых трех параграфов цвет внешних полей (отступов) совпадал с фоном страницы, а у остальных — с фоном самих параграфов.
  5. Вставьте на страницу изображение и выровняйте его по левому краю, но так, чтобы его обтекали только последние три параграфа.
  6. Установите у изображения внешние поля по 10px снизу и справа, а также 5px слева.

Посмотреть результат → Посмотреть ответ

Изображения← Содержание →Изображения — ссылки

Фоны : Фоновое изображение — Учебник HTML

Если вы хотите добавить фоновое изображение вместо простого цвета, перед тем, как это сделать, следует учесть некоторые соображения:

  • Является ли фоновое изображение достаточно дискретным, чтобы не отвлекать внимание от того, что на нем написано?
  • Будет ли фоновое изображение работать с цветами текста и ссылок, которые я установил для страницы?
  • Будет ли фоновое изображение работать с другими изображениями, которые я хочу разместить на странице?
  • Сколько времени потребуется странице для загрузки моего фонового изображения
    ? Он просто слишком большой?
  • Будет ли работать фоновое изображение, когда оно копируется на всю страницу? Во всех разрешениях экрана?

После ответов на эти вопросы, если вы все еще хотите добавить фоновое изображение, вам нужно будет указать в теге, какое изображение должно использоваться в качестве фона.


Примечание:
Если используемое изображение меньше размера экрана, оно будет копироваться до тех пор, пока не заполнит весь экран.

Если, скажем, вы хотите полосатый фон для своей страницы, вам не нужно делать для него огромное изображение. По сути, вы можете просто сделать изображение высотой два пикселя и шириной один пиксель. При вставке на страницу две точки будут скопированы, чтобы заполнить страницу, создавая таким образом то, что выглядит как полноэкранное полосатое изображение.

Когда вы решите использовать фоновое изображение для страницы, всегда полезно также указать цвет фона.

gif» bgcolor=»#333333″>

Причина в том, что пока не загружено фоновое изображение, будет отображаться цвет фона.

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

Поэтому рекомендуется указать цвет фона, который максимально соответствует цветам изображения.

Возможно, вы заметили, что фоновые изображения прокручиваются вместе со страницей при использовании полосы прокрутки.

Последняя страница в этом разделе научит вас, как добавить фиксированное изображение на вашу страницу …..

<< Предыдущий
Прочтите больше >>
.0030

Альтернативный текст для фоновых изображений, доступность замещающего текста

Избегайте представления информационных изображений в фонах CSS

Если ваше изображение содержит важную информацию для конечного пользователя, тогда он должен быть предоставлен в HTML тег с правильным или текст. Спецификация CSS говорит следующее:

Из соображений доступности авторы не должны использовать фон изображения как единственный способ передачи важной информации. См. Интернет Руководство по доступности контента F3 [WCAG20] . Изображения недоступны в неграфических презентациях, и фоновые изображения могут быть отключены в высококонтрастные режимы отображения. Источник .

Не могу избежать использования изображений CSS или хочу изменить текст для «неважные» фотографии окружения и т. д.?

Спецификация CSS делает это «СЛЕДУЕТ», а не «ОБЯЗАТЕЛЬНО», потому что бывают случаи, когда визуальный дизайн или существующий код затрудняет преобразование его в HTML-изображение без переделки интерфейса. В других случаях автор может захотеть чтобы предоставить альтернативный текст для фонового изображения, которое , а не «важно» для понимания содержания, но из вежливости для пользователей программ чтения с экрана, которые предпочитают знать, что находится на изображении. Вот подробная статья об эмбиенте изображения против чистого украшения против информационных изображений.

При предоставлении альтернативного текста для изображения CSS количество соображений

Если <дел> внутри тега есть какой-либо контент, то роль = "изображение" а также ария-этикетка может скрыть внутреннее содержимое из-за доступного расчет имени , или вспомогательные технологии могут просто игнорировать ария-этикетка .

Так что не помещайте фоновое изображение CSS в <дел> который содержит любой контент. Лучше всего использовать пустой <диапазон> и ария-этикетка с роль = "изображение"

Сделайте это:
<дел>
<диапазон role="img" aria-label="[разместите здесь замещающий текст]>
[весь остальной контент]

Не делайте этого:


[все остальные моего содержания]

Что делать, если автор должен иметь CSS-изображение в div, который содержит контент

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

, которое оборачивает другой контент, затем хакерский запасной вариант — сделать это.
<дел >
<диапазон role="img" aria-label="[разместите здесь замещающий текст]>
[весь остальной контент]

Это хак, потому что семантически альтернативный текст не включен. элемент, который на самом деле имеет изображение. Однако с экрана точка зрения читателя <дел> с фоновым изображением игнорируется, поэтому размещение <диапазон> сразу после него будет предоставлять эту информацию таким образом, что будет казаться, что альтернативный текст находится в том же месте, что и фоновая картинка.

Резюме

  • Старайтесь не использовать CSS для важных информационных изображений
  • Для фоновых изображений, созданных с помощью CSS, рекомендуется предоставить альтернативный текст. При этом поместите изображение в собственное пустой с меткой aria-label и role="изображение Это также верно, в ситуации где CSS должен использоваться для информационного содержания.

    No related posts.