Как изменить фоновое изображение css при клике?
Я хотел бы изменить css «background-image:», когда кто-то нажимает кнопку.
Я не уверен, могу ли я изменить его с помощью css или мне нужно будет включить java-скрипт. Кроме того, если мне нужен скрипт java, какой код мне нужен?
Моя текущая работа с css и выглядит так:
7 ответов
JQuery
В этих разных состояниях вы можете делать все, что вам нужно. Есть также множество других государств, которые вы можете использовать http://api.jquery.com/category/events/mouse-events/
HTML
CSS
есть только альтернативы css, но они не очень хороши в поддержке: http://tympanus.net/codrops/2012/12/17/css-click-events/
1. CSS-псевдоклассовый селектор: активный
Если вы не заботитесь о сохранении, вы всегда можете использовать псевдокласс «: active». Изображение будет затронуто только до тех пор, пока ваша мышь не будет нажата. Как только вы нажмете мышь, он вернется. На данный момент это примерно так же близко, как вы можете получить в CSS.
2. Измените атрибут стиля с помощью JavaScript
JavaScript — это единственный способ, которым вы сможете щелкнуть объект, мышь и фон по-прежнему меняются. JavaScript дает вам пару способов сделать это.
Вы можете использовать JavaScript, чтобы изменить атрибут стиля объекта, чтобы обновить «фоновое изображение».
3. Измените атрибут класса с помощью JavaScript
Или аналогичным образом вы можете создать два класса в своем CSS и использовать JavaScript для обновления атрибута класса объекта.
Мой личный любимый метод — это третий вариант, когда вы по-прежнему используете CSS для стилизации вашего obj в разных состояниях, а затем используете JavaScript для изменения имени класса для обновления этих состояний. Это меньше JavaScript, больше CSS, и вы держите все в своих подходящих местах.
Переключатель фона на сайте
Простой в реализации но в тоже время эффективный переключатель фона (цвета, изображений) для сайта.
Переключатель фона для сайта реализован с помощью HTML и CSS. Также для работы необходимо подключить библиотеку jQuery.
Если есть вопросы, задавайте в комментариях.
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
2 комментария
непонятно для меня, я не знаю html , но блин, как его связать с css? название контейнера ?
и класс js тоже тёмный лес .
написано для профи, для тех кто шарит хорошо. Но для начинающих хотелось бы подробностей.
эта тема сама по себе логически ложная, нужно чтобы html кнопка переключала в css классы, да ещё и js откуда то взялся…
Слайдер фонового изображения или меняющийся фон сайта с помощью CSS
Хочу показать Вам как с помощью CSS можно организовать — слайдер фона сайта. То есть фон сайта будет меняться и станет динамичным. Такой эффект часто применяют на сайтах визитках, для демонстраций портфолио или других изображений, которые расскажут о тематике и направлении сайта.
Данный слайдер прост в установке и если разберетесь, то сможете легко его настроить и добиться нужного результата. Для работы данного слайдера, нужно всего несколько элементов, которые мы сейчас рассмотрим по порядку.
HTML разметка
Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.
В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.
CSS стили
Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл стиле вашего сайта и добавляем в него следующий код.
Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.
Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.
Далее у нас идет псевдоэлемент — :after, который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.
.body_slides li:nth-child(1) — это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.
Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.
keyframes anim_slides — это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие — opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. В данном примере — 3 слайда и 100% анимации это время перелистывания всех слайдов, а не одного. Поэтому слайд первый появляется виден и исчезает на 30%(максимально можно 33.3%) потому как, если 100% разделить на 3 слайда — получится 33,3%. Если бы у вас было 4 слайда — то 25%. То бишь, нужно показать появление, показ и исчезновение слайда за 25% от общих 100%. В нашем примере с 3 слайдами. Слайд появляется от 0 до 6%, виден от 6 до 24% и исчезает от 24 до 30%. Если хотите изменить скорость появления или исчезновения, меняйте проценты — это процент от общего времени. От правильности указания процентов — зависит и правильность работы слайдера.
Остальные настройки уже по желанию и нужде — общий фон, сейчас черный, путь к картинкам, позиционирование, уровень слоя и тд. Преимущество данного слайдера в том, что он простенький и не использует скриптов и целых библиотек, если бы он был сделан с помощью — jQuery. Очень надеюсь, что если Вы хотели себе смену фоновых картинок то данный CSS слайдер, Вам поможет.
На этом все, спасибо за внимание. ��
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂
How to change css background-image on click?
I’d like to change the css «background-image:» when someone clicks a button.
I’m not sure if I’m able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
7 Answers 7
jquery
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
css
there are css only alternatives, but they’re not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/
You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.
1. CSS pseudo-class selector:active
If you didn’t care about persistence you could always use the the pseudo-class «:active». The image will only be affected as long as your mouse is down. As soon as you mouse-up it’ll revert. At this moment, that’s about as close as you can get in CSS.
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you’re going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object’s style attribute to update the ‘background-image’.
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object’s class attribute.
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It’s less JavaScript, more CSS, and you’re keeping everything in their appropriate places.