Question

当有人点击按钮时，我想更改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 {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}

Answer 1

我这样接近它。 http://jsfiddle.net/darcher/6Ex7h/

<强> jquery的

   $('.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/

<强> HTML

<div href="#" class="img bg"></div>

<强> CSS

.img{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    display:block;
    height:200px;
}
.bg{
    background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
    background-image:url(http://placehold.it/300x200/black/white);
}

只有css替代方案，但他们在支持方面并不是很出色：http://tympanus.net/codrops/2012/12/17/css-click-events/

Answer 2

您可以使用javascript更改背景。以下网站javascripter是通过Javascript更改背景颜色和操作CSS的示例。我希望这可以帮到你。

Answer 3

<强> 1。 CSS伪类选择器：活动

如果你不关心持久性，你总是可以使用伪类“：active”。只要鼠标按下，图像就会受到影响。一旦你鼠标上升它就会恢复。此刻，这与CSS中的情况差不多。

.hello-button:active {
    background-image: url("image.jpg");
}

JSFiddle示例：http://jsfiddle.net/pkrWV/

<强> 2。使用JavaScript更改样式属性

JavaScript只是你能够点击一个对象的唯一方式，鼠标向上，背景仍然会改变。 JavaScript也为您提供了几种方法。

您可以使用JavaScript更改对象的样式属性以更新“背景图像”。

obj.style.backgroundImage = 'url("image.jpg")';

JSFiddle：http://jsfiddle.net/pkrWV/1/

第3。使用JavaScript更改类属性

或者类似地，您可以在CSS中创建两个类，并使用JavaScript来更新对象的类属性。

/* JavaScript */
obj.className = 'imageOneClassName';

/* CSS */
.imageOneClassName {
    background-image: url("image.jpg");
}

JSFiddle：http://jsfiddle.net/pkrWV/2/

我个人最喜欢的方法是第三个选项，你仍然使用CSS来设置不同状态的obj，然后使用JavaScript来更改类名来更新这些状态。它更少的JavaScript，更多的CSS，并且你将所有东西保存在适当的位置。

Answer 4

$(function() {
  $('.home').click(function() {
    $(this).css('background-image', 'url(images/hello.png)');
  });
}):

你必须这样做，有一个相对的问题看到这个我希望我帮助你...

jquery onclick change css background image

Answer 5

在纯HTML / CSS中无法做到这一点，但在javascript中你可以这样做：

var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
    button.style.backgroundImage = "url(bye.png)";
});

您可以将其添加到<script></script>代码中，也可以将其添加到.js文件中，并添加<script src="scriptName.js"></script>

Answer 6

以下是仅限CSS的解决方案：http://jsfiddle.net/VVj6w/

HTML

<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input[type = "checkbox"] {
    display: none;
}

label {
    position: absolute; 
    top: 10px;
    left: 10px;
    background-color: #eee;
    border: 2px solid #ccc;
    padding: 5px;
    border-radius: 10px;
    font-family: Arial, Sans-Serif;
    cursor: pointer;
}

#wrapper {
    background-color: hsla(0, 100%, 50%, 1);
    height: 100%;
    width: 100%;
}

input[type = "checkbox"]:checked ~ #wrapper {
    background-color: hsla(0, 100%, 50%, 0.1);
}

Answer 7

如果您只想在点击时更改它，则应该可以使用

.hello-button:active {
    background-image: url("bye.png");
    ...
}

如果你希望它在点击之后保持这种状态（在释放鼠标按钮之后），你将不得不使用javascript。类似于以下内容

document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
    el.classList.add("clicked");
});

然后在CSS中，将选择器更新为

.hello-button.clicked

如何在点击时更改css背景图片？

7 个答案: