| Kosten | Понедельник, 07 Октября 2019 | Сообщение 1 |
| Этот совет CSS содержит информацию о том, как сделать полупрозрачное фоновое изображение и разместить его поверх другого изображения, такого как баннер или другого изображения на вашем сайте. Это можно сделать с помощью большинства графических программ, которые позволяют сохранять прозрачные изображения в формате PNG.
Если вы просто хотите сделать полупрозрачный фон с помощью CSS, без использования изображения, прокрутите страницу вниз.
Шаг 1. Настройте цвет и размер изображения:
Первый шаг — настроить изображение нужного размера и цвета, которое будет выложено поверх баннера или фотографии. Вы не хотите закрывать весь баннер, поэтому выберите размер, который оставит достаточно места со всех сторон для показа части баннера.
Шаг 2. Добавьте полупрозрачность
Теперь вам нужно применить прозрачность к изображению. Открыв фоновое изображение, нажмите на него, чтобы оно выделилось, а затем в окне свойств установите прозрачность примерно до 75%. Это позволит некоторому фону просвечивать, как только это изображение будет размещено над баннером. Сохраните его в формате png, то иначе полупрозрачность может не сработать.
Изображение, что показанное ниже еще не было размещено над баннером, а фон на этой странице белый, поэтому вы не можете видеть прозрачность в этой точке. Я добавил границы и капли для выделения, пока они на этой странице, но это не будет применено к реальному изображению, если вы не решите сделать это:
Шаг 3. Добавить текст и сохранить
Теперь добавьте текст к фоновому изображению, используя текстовый инструмент. Настройте шрифт, цвета и размер текста в различных разделах текста, чтобы добавить интерес. Сохраните его под другим именем, чем баннер, если вы хотите удалить его из баннера позже.
Шаг 4. Разместите изображение над баннером с помощью CSS и HTML
Вы можете сохранить баннер и фоновое изображение как одно изображение, однако, если вы хотите временно применить прозрачность, например, временное уведомление о продаже, которое всплывает над вашим баннером, чтобы его можно было легко удалить, используйте следующие инструкции.
Перед началом этого шага вы можете сохранить исходный код для своего баннера, чтобы было легко вернуться к исходному изображению, просто заменив исходный код.
Чтобы расположить изображение таким образом, чтобы оно было статичным на странице "не перемещалось по странице при изменении размера окна браузера!, нам нужно настроить контейнер, содержащий изображение, как «position :lative», а затем использовать » position: absolute на элементе div, который содержит фоновое изображение.
Следующий HTML-код предназначен для тех, кто предпочитает встроенные стили.
Кодирование ниже для использования файла CSS.
Если вы знаете как настроить файл CSS, вы можете уменьшить код на веб-странице и вместо этого добавить все форматирование в css, настроив новую запись в вашем файле css для двух элементов div следующим образом.
Код файла CSS:
Код .tempsale {text-align:center; position:relative;}
.tempsaletext {positon:absolute; top:10px; left:20%; }
HTML-код:
Код <div class="tempsale" > <img src="Здесь баннер под номером 1" width="800" height="100" alt="banner"> <div class="tempsaletext"> <img src="Здесь баннер под номером 2" width="500px" height="80px" alt="Sale"> </div></div>
Готовый баннер с фоновым изображением, плавающим над ним, показанным ниже, имел ширину около 800 пикселей, что оставляло около 150 пикселей с каждой стороны баннера.
Шаг 5. Сделайте новый образ отзывчивым для мобильных устройств
Если вы разрабатываете это, чтобы перейти на мобильный веб-сайт, пропустите измерения ширины и высоты в теге img и обязательно добавьте следующий код в ваш CSS-файл, чтобы изображение подстраивалось в соответствии с размером мобильного устройства:
Код img {border:0; max-width:100%; height:auto;}
Это изображение флага США имеет прямоугольник с закругленными углами, наложенный над ним с полупрозрачным фоном. Падающая тень была применена как к изображению и прямоугольник с закругленными углами с помощью CSS.
Этот образец предназначен для баннера на веб-сайте с адресом в правом верхнем углу. Адрес перемещается в центр страницы с полупрозрачным фоном, когда используется планшет или небольшое мобильное устройство.
Сделать полупрозрачный фон с CSS и непрозрачностью в HTML
Непрозрачность часто используется в цвете фона раскрывающихся меню, поэтому часть баннера или другие функции просвечивают незначительно. Непрозрачность 1,5 даст вам 50% непрозрачности. Оттуда поднимайте или опускайте число, пока оно не окажет желаемого эффекта.
Если вы хотите, чтобы прозрачность применялась ко всему сайту, установите класс прозрачности в вашем CSS-файле, например так:
А затем примените его к элементу div или другому элементу, например так:
Если вы собираетесь добавить непрозрачность только к нескольким элементам, добавьте тег стиля к тому, что вы хотите сделать более непрозрачным, например:
Код <style="opacity:1.5">Текстовые или фоновые данные идут сюда</style> | | Страна: (RU) |
| |
