Question

嘿我在HTML中有刷新按钮，我想在点击它时旋转该按钮上的图像。我使用css创建了如下效果：

 input.button_refresh {

margin-left: 600px;
background: url("../images/refresh.JPG") 0 0 no-repeat scroll ;
background-position: right;
font-weight: bold;
background-color: rgb(80,140,210);
display: inline-block;
cursor: pointer;
height: 20px; /* height of the background image */
width: 70px; /* width of the background image */
color: threedface;
border-radius: 6em;
 }

HTML

<input type="image" name="Refresh" value="Refresh" class="button_refresh" onclick="window.location.reload()" />

Answer 1

您认为您可以按照Alien的方式行事。除此之外，你可以保留一个标志，并通过调用特定的css类来相应地旋转图像。

Answer 2

试试这个

input.button_refresh:active {
  background: url("../images/otherImage.JPG") 0 0 no-repeat scroll ; /* other image or rotated image */
}

选中此DEMO

编辑：添加了演示

如何旋转html按钮上显示的图像

2 个答案: