Html изменить фон: Как изменить цвет фона и текста веб-страницы?

html — Изменить и фон, и картинку при наведении мыши на элемент

Задать вопрос

Вопрос задан 4 года 10 месяцев назад

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

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

Как при наведении на картинку, у которой круглый background c цветом, сделать изменение цвета и фона, и самой картинки (иконки) одновременно?

.menu li{
    list-style: none;
    margin-right: 15px;
    border-radius: 50%;
    width: 53px;
    height: 53px;
    background-color: #030303;
    opacity: 0.4;
}

.menu_link img{
    padding: 14px 14px 14px 14px;
}

.menu li:hover {
    background-color: #2ecc71;
    color: red;
    opacity: 1;
}

<nav>
    <ul>
        <li>
            <a href="#"><img src="img/apple. png" alt=""></a>
        </li>
    </ul>
 </nav>

Должно быть вот так:

• html
• css
• hover
• background
• img

0

Если это <img src="img/apple.png" alt=""> работает как задний фон то лучше использовать backgroung-image и растянуть пустую ссылку <a> на всю строчку <li>

2

Попробуйте заменять картинку на другую, то есть картинке невозможно задать цвет через свойство color, дайте кнопке background-image() и при наведении на нее просто меняйте на другую картинку. Также рекомендую поработать с SVG. Есть еще библиотекa Font Awesome(иконки в шрифтах).

2

Вот вам пример с Font-Awesome

body{
  background:url(https://st. depositphotos.com/1986597/2352/i/950/depositphotos_23525721-stock-photo-beige-brick-background.jpg) no-repeat center/cover;
}
.circle{
  display:inline-block;
  width:35px;
  height:35px;
  line-height:35px;
  text-align:center;
  background-color:#444;
  border-radius:50%;
  color:#fff;
  opacity:.55;
}
.circle:hover{
  transition:all .3s ease;
  background-color:#2ecc71;
  opacity:1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#"><i></i></a>
<a href="#"><i></i></a>
<a href="#"><i></i></a>

3

Сделать задуманое можно при помощи спрайтов картинок (иконок) + свойствами CSS: background: url('img/icons-sprite.png') no-repeat 0 0; & background-position: 0px 0px;

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

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

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

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

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

Почта

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

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

Почта

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

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

Как изменить фон у радиокнопки на CSS

Основы Laravel

Пройдя курс, Вы узнаете:

— Как установить и настроить Laravel

— Всю необходимую базу по Laravel

— Как создавать несложные сайты на Laravel

Общая продолжительность курса 4. 5 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Люди не хотят быть богатыми, люди хотят быть богаче других.

Джон Стюарт Милль

Меня недавно попросили рассказать, как поменять фон у радиокнопки через CSS. Задача это не тривиальная, поскольку обычными путями фон радиокнопки не изменить. Однако, есть обходные пути, о которых я в этой статье и поведаю.

Привожу HTML-код:

<input type="radio" name="name" />
<label for="r_1">Описание радиокнопки</label>
<input type="radio" name="name" />
<label for="r_2">Описание радиокнопки</label>

Отмечу важную вещь, что обязательно должен быть атрибут

id у радиокнопки, плюс for на этот id у тега label. Без этого ничего работать не будет.

И CSS-код:

.r_button {
display: none;
}

.r_button + label {
background: url("radio.png") no-repeat scroll 0 0;
cursor: pointer;
padding-left: 25px;
}

.r_button:checked + label {
background: url("radio_active.png") no-repeat scroll 0 0;
}

Сразу скажу, что «+» означает, что стиль должен быть применён к label, следующему после

.r_button.

Теперь поясню, как это работает. Мы скрываем вообще радиокнопку, то есть она не показывается. Зато у label мы ставим поле слева, плюс слева ставим фон неактивной радиокнопки. Однако, мы с Вами поставили for у label. Следовательно, по клику на метке, у нас радиокнопка включается. Следовательно, срабатывает селектор «.r_button:checked + label«, который меняет у нас фон label.

Как только идёт переключение на другую кнопку, сразу возвращаемся к неактивному фону.

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

Отмечу, что данный способ работает во всех современных браузерах, за исключением IE8 и ниже. Для них придётся писать отдельный файл стилей, в которых оставить стандартные радиокнопки.

• Создано 13.03.2013 04:34:00
• Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Курс программирования | Обучение программированию

Курс программирования | Обучение программированию | Школа программирования CodeBerry

Знания будущего

Мы обучаем HTML5, CSS, Javascript и Node.js. Если это не имеет никакого смысла, не беспокойтесь — именно поэтому вы здесь. 😊

Начать

Опытные наставники

Преподаватели CodeBerry являются экспертами в своей области с многолетним опытом программирования. Когда вам понадобится помощь, они будут рядом, чтобы направлять вас на каждом этапе пути.

Начало работы

Полезное сообщество

Познакомьтесь с нашим удивительным сообществом. Зарегистрировавшись в CodeBerry, вы сможете общаться в онлайн-чате и учиться вместе с однокурсниками.

Начало работы

Наша команда

Наша команда опытных преподавателей помогла более чем 160 000 человек начать свой путь программирования. Представляя 20 разных стран, они работают круглосуточно и со всего мира, чтобы сделать обучение программированию увлекательным.

Студенческие рассказы

Стать фронтенд-разработчиком из пекарни — История студента

От инженера-агронома до строителя – Студенческая история

Мне нужна тишина и покой — Студенческая история

Знаете ли вы?

CodeBerry предлагает курсы программирования на 20 языках, в которых обучаются студенты из 32 стран мира.

160 351

Студенты

856 541

Пройденные уроки

5 443 468

Строки кода

Чему мы учим

HTML5

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

CSS3

CSS3 позволяет изменять внешний вид веб-сайтов. На наших курсах CSS3 вы будете изменять элементы, созданные ранее в HTML5. Вводный курс научит вас основам CSS3, таким как изменение определенных аспектов веб-сайта, таких как заголовки, текст, изображения и ссылки. Мы также поиграем с цветом, размером, шрифтом и выравниванием этих элементов. Более продвинутые функции CSS3, такие как видимость, настройки, связанные с позиционированием, рамки, поля и анимация, будут включены в последующие курсы.

JavaScript

JavaScript позволяет создавать интерактивные веб-страницы (например, вы можете изменить часть страницы, нажав кнопку) и строить логику (например, программу, которая может рисовать). JavaScript — один из самых популярных языков программирования в мире. В вводном курсе мы покажем вам основы JavaScript, такие как переменные, циклы и функции. Позже вы откроете для себя другие элементы языка JavaScript, а также библиотеки и фреймворки.

Node.js

С помощью Node.js вы можете создавать сложные веб-страницы, которые не только запускаются в браузере, но и выполняют действия на сервере. В нашем вводном курсе Node.js вы узнаете, как создать среду, необходимую для программирования Node.js, и узнаете, как написать простую клиент-серверную программу.

Git

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

Bootstrap

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

Ценообразование

Выберите план, который подходит именно вам:

Оплата ежемесячно Оплата ежегодно

Бесплатно

• Доступ к первым 25 урокам
• Активное сообщество, которое может помочь вам, если вы застряли
•  
•  
   

Зарегистрируйтесь бесплатно

$59

/ месяц

• Доступ ко всем нашим курсам
• Активное сообщество, которое может помочь вам, если вы застряли
• 60-дневная гарантия возврата денег
•  
   

Начать

Бесплатно

• Доступ к первым 25 урокам
• Активное сообщество, которое может помочь вам, если вы застряли
•  
•  
   

Зарегистрируйтесь бесплатно

$399

/ год

• Доступ ко всем нашим курсам
• Активное сообщество, которое может помочь вам, если вы застряли
• 60-дневная гарантия возврата денег
• Доступ на 1 полный год

Начать

Часто задаваемые вопросы

Ваша ежемесячная подписка дает вам полный доступ ко всем нашим собственным учебным материалам. На выполнение каждой главы (или проекта) уходит от 1 до 5 часов, а завершение всех из них займет у вас примерно 170 часов. Мы стремимся загружать новые проекты каждые две недели.

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

Нет, вы можете отменить подписку в любое время. Просто отправьте нам письмо по адресу [email protected].

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

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

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

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

Для облегчения общения между студентами мы используем программу Slack. Это бесплатно для использования и доступно из вашего браузера. Вы также сможете общаться с однокурсниками с помощью приложения.

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

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

Мы советуем вам дать себе неделю или две, чтобы выяснить, нравится ли вам программирование. Если да, то вас ничто не остановит. Если нет, вы можете вернуть свои деньги и поискать что-то, что вам больше подходит.

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

Для вступления в CodeBerry нет возрастных ограничений; нашему самому молодому ученику 11 лет, а самому старшему 73 года! Присоединяйтесь к нашему сообществу, независимо от вашего возраста.

Прежде всего вам понадобится веб-браузер. Позже в ходе курса вам также понадобится текстовый редактор (специализированное приложение для веб-разработки). Ни один из этих инструментов не требует дополнительных денег или высоких технологий, равно как и программирование в целом. Современный ноутбук или ПК должны работать нормально, независимо от операционной системы. Вы можете пройти наш курс на Windows, macOS или даже Linux.

Да, это так. Цена, по которой вы подписываетесь, — это цена, которую вы будете платить всегда, даже если приостановите подписку. И у нас есть 60-дневная гарантия возврата денег, если вы не удовлетворены.

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

Это может быть вызвано двумя возможными причинами: 1. Вы выбрали вариант прямого перевода, а платеж еще не поступил. Банки могут обрабатывать переводы в течение 1 рабочего дня. 2. Вы пытались войти в систему, используя адрес электронной почты, отличный от того, который вы использовали для оплаты. Если вы войдете в систему, используя тот же адрес, с которого вы заплатили, вы должны иметь доступ к материалам. Если у вас по-прежнему возникают проблемы, свяжитесь с нами по адресу [email protected], и мы их исправим.

Компании, с которыми мы работаем

Начните учиться сегодня!

Готовы вывести свою карьеру и жизнь на новый уровень? Вы попали в нужное место.

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

Готов учиться? Присоединяйтесь к 160 000 энтузиастов программирования сегодня!

Попробуйте первые 25 заданий бесплатно

Курс программирования | Обучение программированию

Курс программирования | Обучение программированию | Школа программирования CodeBerry

Знания будущего

Мы обучаем HTML5, CSS, Javascript и Node. js. Если это не имеет никакого смысла, не беспокойтесь — именно поэтому вы здесь. 😊

Начать

Опытные наставники

Преподаватели CodeBerry являются экспертами в своей области с многолетним опытом программирования. Когда вам понадобится помощь, они будут рядом, чтобы направлять вас на каждом этапе пути.

Начать

Полезное сообщество

Познакомьтесь с нашим удивительным сообществом. Зарегистрировавшись в CodeBerry, вы сможете общаться в онлайн-чате и учиться вместе с однокурсниками.

Начало работы

Наша команда

Наша команда опытных преподавателей помогла более чем 160 000 человек начать свой путь программирования. Представляя 20 разных стран, они работают круглосуточно и со всего мира, чтобы сделать обучение программированию увлекательным.

Студенческие рассказы

Стать фронтенд-разработчиком из пекарни — История студента

От инженера-агронома до строителя – Студенческая история

Мне нужна тишина и покой — Студенческая история

Знаете ли вы?

CodeBerry предлагает курсы программирования на 20 языках, в которых обучаются студенты из 32 стран мира.

160 351

Студенты

856 541

Пройденные уроки

5 443 468

Строки кода

Чему мы учим

HTML5

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

CSS3

CSS3 позволяет изменять внешний вид веб-сайтов. На наших курсах CSS3 вы будете изменять элементы, созданные ранее в HTML5. Вводный курс научит вас основам CSS3, таким как изменение определенных аспектов веб-сайта, таких как заголовки, текст, изображения и ссылки. Мы также поиграем с цветом, размером, шрифтом и выравниванием этих элементов. Более продвинутые функции CSS3, такие как видимость, настройки, связанные с позиционированием, рамки, поля и анимация, будут включены в последующие курсы.

JavaScript

JavaScript позволяет создавать интерактивные веб-страницы (например, вы можете изменить часть страницы, нажав кнопку) и строить логику (например, программу, которая может рисовать). JavaScript — один из самых популярных языков программирования в мире. В вводном курсе мы покажем вам основы JavaScript, такие как переменные, циклы и функции. Позже вы откроете для себя другие элементы языка JavaScript, а также библиотеки и фреймворки.

Node.js

С помощью Node.js вы можете создавать сложные веб-страницы, которые не только запускаются в браузере, но и выполняют действия на сервере. В нашем вводном курсе Node.js вы узнаете, как создать среду, необходимую для программирования Node.js, и узнаете, как написать простую клиент-серверную программу.

Git

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

Bootstrap

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

Ценообразование

Выберите план, который подходит именно вам:

Оплата ежемесячно Оплата ежегодно

Бесплатно

• Доступ к первым 25 урокам
• Активное сообщество, которое может помочь вам, если вы застряли
•  
•  
   

Зарегистрируйтесь бесплатно

$59

/ месяц

• Доступ ко всем нашим курсам
• Активное сообщество, которое может помочь вам, если вы застряли
• 60-дневная гарантия возврата денег
•  
   

Начать

Бесплатно

• Доступ к первым 25 урокам
• Активное сообщество, которое может помочь вам, если вы застряли
•  
•  
   

Зарегистрируйтесь бесплатно

$399

/ год

• Доступ ко всем нашим курсам
• Активное сообщество, которое может помочь вам, если вы застряли
• 60-дневная гарантия возврата денег
• Доступ на 1 полный год

Начать

Часто задаваемые вопросы

Ваша ежемесячная подписка дает вам полный доступ ко всем нашим собственным учебным материалам. На выполнение каждой главы (или проекта) уходит от 1 до 5 часов, а завершение всех из них займет у вас примерно 170 часов. Мы стремимся загружать новые проекты каждые две недели.

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

Нет, вы можете отменить подписку в любое время. Просто отправьте нам письмо по адресу [email protected].

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

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

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

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

Для облегчения общения между студентами мы используем программу Slack. Это бесплатно для использования и доступно из вашего браузера. Вы также сможете общаться с однокурсниками с помощью приложения.

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

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

Мы советуем вам дать себе неделю или две, чтобы выяснить, нравится ли вам программирование. Если да, то вас ничто не остановит. Если нет, вы можете вернуть свои деньги и поискать что-то, что вам больше подходит.

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

Для вступления в CodeBerry нет возрастных ограничений; нашему самому молодому ученику 11 лет, а самому старшему 73 года! Присоединяйтесь к нашему сообществу, независимо от вашего возраста.

Прежде всего вам понадобится веб-браузер. Позже в ходе курса вам также понадобится текстовый редактор (специализированное приложение для веб-разработки). Ни один из этих инструментов не требует дополнительных денег или высоких технологий, равно как и программирование в целом. Современный ноутбук или ПК должны работать нормально, независимо от операционной системы. Вы можете пройти наш курс на Windows, macOS или даже Linux.

Да, это так. Цена, по которой вы подписываетесь, — это цена, которую вы будете платить всегда, даже если приостановите подписку. И у нас есть 60-дневная гарантия возврата денег, если вы не удовлетворены.

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

Это может быть вызвано двумя возможными причинами: 1. Вы выбрали вариант прямого перевода, а платеж еще не поступил. Банки могут обрабатывать переводы в течение 1 рабочего дня.