Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Как в css затемнить фон

Как затемнить фон картинки через css | Wild SEO

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

Наш вопрос: Ка затемнить рисунок, чтобы при наведении на него мышкой он осветлялся.

Примеры работы затемнения вы можете посмотреть у меня на блоге в трех местах: 1) Счетчики в футере (очень затемненные); 2) Кнопки социальных закладок (средне затемненные); 3) Кнопки подписки на новости в сайдбаре (мало затемненные). Чтобы попробовать как это работает, просто наведите на соответствующую картинку.

Собственно приступим к реализации:

Все элементы затемнения задаются специальным кодом. Прописывается этот код в wordpress в файле style.css. То есть 1) Открываем файл style.css.

Наш следующий шаг — придумать название для кода. Для затемнения групп картинок ( у меня это: счетчики, кнопки соц закладок, кнопки подписок) я использую отдельные коды (классы — class), то есть 3 разных класса. Можно придумать кучу разнообразных затемнений, как для групп картинок, так и для каждой в отдельности.

Каждый на блоге имеет счетчики, давайте проведем эксперимент над ними. Возьмем название schetchiki.

2) В самом низу страницы style.css вставляем следующее:

Для чего нужен этот блок. Как видно, я уже вписал в сам блок объяснения, но раскрою подробнее: font-size — задает размер шрифта, если мы будем писать что-то в блок с картинками. font-weight — определяет стиль текста, в моем случае blod — жирный (можно так же поставить normal, bolder, lighter). padding — определяет отступ от границы, то есть расстояние от вашего текста или картинки до граница (рамки), если конечно вы будете ее делать указав border — который укажет толщину рамки (если оставить ноль, то рамки не будет) и цвет (html код, ставится после знака #. Коды цветов можно посмотреть, набрав в поиске Яндекса «Палитра цветов Яндекс»). 3) Чуть ниже предыдущего кода вставляем:

.schetchiki a img{ border: none; opacity:0.5; /* непрозрачность: 50% */ }

Этот блок предназначен для отображения картинка, такой, как мы будем ее видеть до наведения на нее мышкой. То есть определяем степень затемнения (или непрозрачность).

Здесь нам важна команда opacity — она и определяет затемнение. Значение можно ставить от 0.0 до 1.0. Как вы видите у меня стоит значение 0.5, то есть прозрачность составляет 50%, посмотреть, как это выглядит можете в футере. Далее переходим к четвертому пункту.

4) Вставляем третий и последний блок:

.schetchiki a:hover img{ border: none; opacity:1.0; /* непрозрачность: 100% */ }

Этот блок будет определять какой станет наша картинка, когда мы наведем на нее мышкой (значение a:hover). У меня указано значение opacity:1.0, что означает — картинка будет становится полностью видимой, без затемнения.

В итоге мы получаем вот такой большой блок, его и надо вставить в файл style.css, все настройки можете поменять на свои.

.schetchiki{ font-size: 13px; /* размер шрифта */ font-weight: bold; /* стиль текста: жирный */ padding:0px; /* отступ от границ */ border:0px solid #CCC; /* толщина и цвет рамки */ } .schetchiki a img{ border: none; opacity:0.5; /* непрозрачность: 50% */ } .schetchiki a:hover img{ border: none; opacity:1.0; /* непрозрачность: 100% */ }

Последняя наша задача, применить данный код в действии.

Заходим туда, где у вас расположен код счетчика (ну или любой другой картинки). У меня он расположен в футере, я захожу в footer.php и ищу код счетчика. Нахожу код счетчика LiveInternet.

Теперь внимание, необходимо в начале кода поставить такое

А в конце поставить

Получаем вот такое:

document.write(«»)

//—>

Еще отмечаю, что при написании команды div class= после равно коряво отображается кавычка, как вы понимаете первая кавычка открывает, а вторая закрывает.

Теперь можете проверить, ваш счетчик должен быть затемнен, при наведении на него он должен осветляться. Что хочется отметить: такие изменения приносят небольшую изюминку в стиль блога. Ненужные и неинформативные изображения затемняют от глаз посетителя. А если он все таки наводит на них, то они стильно осветляются. Очень удобно и смотрится классно. Конечно, если вам нужна профессиональная верстка сайта заказать ее лучше специалисту, но небольшие правки лучше сделать самому.

При создании можете использовать любые названия, как у меня был schetchiki, можно использовать хоть vasya, petya и так далее. Ставьте свои значения и играйте с ними, пока не придете к окончательному варианту.

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

А вот плюшечка для настроения:

httpv://youtube.com/watch?v=xLgQNhPSOt0&playnext=1&list=PLCF8E952EE26A4035

Затемнение background изображения

DLE FAQ » Все вопросы » Общие вопросы » Затемнение background изображения

30.08.2011 SlimYalta Общие вопросы 30.08.2011 SlimYalta Общие вопросы 16.03.2013 dmfranklin Общие вопросы 09.01.2014 jtskeed Общие вопросы 12.01.2014 mypes Общие вопросы 08.02.2014 Saber Общие вопросы, Шаблоны (TPL) 14.03.2014 vip.boss Общие вопросы 31.05.2014 sr.green Общие вопросы 18.06.2014 vip.boss Общие вопросы

Затемнение изображений простым и быстрым способом на чистом CSS

Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.

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

Размытие фона можно использовать для усиления контраста между текстом и изображением, находящимся за ним. Конечно, можно уменьшить прозрачность изображения, обработав его в программе PhotoShop, но для этого обычно нужно многократное повторение подбора цветов в программе-редакторе изображений и проверки получившегося результата в браузере, в то время как изменение значений в коде CSS требует намного меньше времени и усилий.

Фоновое изображение до затемнения

В записи свойства множественных фоновых изображений первым идет самый верхний фон, так что составная фотография, выполненная Thomas Shahan, располагается последней:

h2 { font-family: Calluna Sans, Arial, sans-serif; color: #fff; margin-top: 0; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('bugs.jpg'); font-size: 5rem; padding: 2rem; text-align: center; background-repeat: no-repeat; background-size: cover; word-spacing: 5rem; }

Применим этот код CSS к коду HTML ниже:

И получим результат, показанный далее. Изменение затемнения фонового изображения достигается просто увеличением последнего значения (alpha), которое задает прозрачность, в записи цвета фона в формате rgba.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

html - Как затемнить фон с помощью CSS?

Просто добавьте этот код в свое изображение css

background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), /* bottom, image */ url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png); }

Ссылка: linear-gradient () - CSS | MDN

ОБНОВЛЕНИЕ: не все браузеры поддерживают RGBa, поэтому у вас должен быть «резервный цвет». Этот цвет, скорее всего, будет твердым (полностью непрозрачным), например: background:rgb(96, 96, 96) . Обратитесь к этому blog за поддержкой браузера RGBa.