BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Тонирование фонового изображения в CSS

Тонирование фонового изображения в CSS

2016-04-14 / Вр:21:45 / просмотров: 1953

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

Тонирование фонового изображения в CSS

Теперь я попробую затонировать изображение с помощью CSS:

Тонирование фонового изображения в CSS

А вот и сам код:

<!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Тонировние фонового изображения в CSS (bloggood.ru)</title>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.tinted-image {
width: 370px;
height: 400px;
background:
/* линейный градиент */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(image.jpg); /* изображение */

}
</style>

</head>
<body>
<div class="tinted-image"></div>
</body>
</html>

Если вам нужна подсказка кода цветов (RGD), смотрите тут

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Один ответ на комментарий - Тонирование фонового изображения в CSS

  1. John

    буль буль СПАСИБО!! РАБОТАЕТ :arrow: :arrow:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136