Как изменить фоновое изображение css при клике?
Я хотел бы изменить css «background-image:», когда кто-то нажимает кнопку. Я не уверен, могу ли я изменить его с помощью css или мне нужно будет включить java-скрипт. Кроме того, если мне нужен скрипт java, какой код мне нужен? Моя текущая работа с css и выглядит так:
.hello-button < background-image: url("hello.png"); background-repeat: no-repeat; background-attachment: inherit; background-position: center; -webkit-transition: 2s ease-out; -moz-transition: 2s ease-out; -o-transition: 2s ease-out; transition: 2s ease-out; >.hello-button:hover Когда кто-то нажимает кнопку, вы хотите, чтобы она оставалась выделенной, или вы просто хотите, чтобы изображение менялось, когда мышь не работает?
@Scampbell Я бы хотел, чтобы изображение менялось при нажатии кнопки. В настоящее время изображение вернется обратно, так как код чисто CSS.
7 ответов
$('.img').on(< click: function()< $(this).addClass('new-bg').removeClass('bg') // changes background on click >, mousedown: function() < // :active state >, mouseup: function() < // on click release >, mouseenter: function() < // on hover >, mouseleave: function() < // hover exit >/* , hover: function() < // or hover instead of enter/leave >*/ >) В этих разных состояниях вы можете делать все, что вам нужно. Есть также множество других государств, которые вы можете использовать http://api.jquery.com/category/events/mouse-events/
есть только альтернативы css, но они не очень хороши в поддержке: http://tympanus.net/codrops/2012/12/17/css-click-events/
1. CSS-псевдоклассовый селектор: активный
Если вы не заботитесь о сохранении, вы всегда можете использовать псевдокласс «: active». Изображение будет затронуто только до тех пор, пока ваша мышь не будет нажата. Как только вы нажмете мышь, он вернется. На данный момент это примерно так же близко, как вы можете получить в CSS.
2. Измените атрибут стиля с помощью JavaScript
JavaScript — это единственный способ, которым вы сможете щелкнуть объект, мышь и фон по-прежнему меняются. JavaScript дает вам пару способов сделать это.
Вы можете использовать JavaScript, чтобы изменить атрибут стиля объекта, чтобы обновить «фоновое изображение».
obj.style.backgroundImage = 'url("image.jpg")'; 3. Измените атрибут класса с помощью JavaScript
Или аналогичным образом вы можете создать два класса в своем CSS и использовать JavaScript для обновления атрибута класса объекта.
/* JavaScript */ obj.className = 'imageOneClassName'; /* CSS */ .imageOneClassName
Мой личный любимый метод — это третий вариант, когда вы по-прежнему используете CSS для стилизации вашего obj в разных состояниях, а затем используете JavaScript для изменения имени класса для обновления этих состояний. Это меньше JavaScript, больше CSS, и вы держите все в своих подходящих местах.
How to Change the Input and Button Images with CSS
Buttons make your website attractive, but sometimes it can be difficult to style them, especially when we need to change buttons to images. Fortunately, there some ways of doing this.
In our snippet, we’ll show how to change buttons to images with and elements.
Create HTML
input type="submit" class="example" value="" />Add CSS
- Set the background property and specify the needed URL.
- Set the cursor property to «pointer».
- Add the width, height, and border properties.
.example < background: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60') no-repeat; cursor: pointer; width: 300px; height: 200px; border: none; >Here is the result of our code.
Example of changing an input image of the button:
html> html> head> title>Title of the document title> style> .example < background: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60') no-repeat; cursor: pointer; width: 300px; height: 200px; border: none; > style> head> body> form> input type="submit" class="example" value="" /> form> body> html>Result
In the example above, we used the background property to include a background image. You can also change the image type if required.
Next, see an example where we use the element to change the image button.
Example of changing a button image:
html> html> head> title>Title of the document title> style> button < background-image: url('https://images.unsplash.com/photo-1582747652673-603191169c49?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-size: cover; width: 400px; height: 300px; font-size: 2em; > style> head> body> button type="submit">Button button> body> html>In our last example, the image appears when we hover on the button. This can be useful when making buttons that react to the mouse.
Example of changing a button image on hover:
html> html> head> title>Title of the document title> style> button < width: 400px; height: 300px; border: 0; cursor: pointer; font-size: 2em; > button:hover < background-image: url('https://images.unsplash.com/photo-1582747652673-603191169c49?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-size: cover; > style> head> body> button type="submit">Button button> body> html>Как сделать кнопку с картинкой в html
Для создания кнопки с картинкой в HTML можно использовать тег и атрибут background-image в CSS. Вот пример кода:
.image-button width: 100px; height: 50px; border: none; background-image: url('path/to/image.jpg'); background-size: cover; > В данном примере мы создаем кнопку с классом «image-button». Задаем ей ширину и высоту, убираем границу и задаем фоновую картинку с помощью атрибута background-image . Картинка будет растянута на всю площадь кнопки благодаря свойству background-size: cover; .
Также можно добавить эффекты при наведении или клике на кнопку с помощью псевдоклассов :hover и :active:
.image-button:hover opacity: 0.8; > .image-button:active transform: scale(0.95); > В данном примере при наведении на кнопку уменьшается прозрачность до 80% с помощью свойства opacity , а при клике на кнопку она уменьшается на 5% с помощью свойства transform: scale(0.95) .