Question

我的css风格如下：

.button {background:#e9e9e9 url('/image.png') no-repeat 9px 12px;}
.button:hover {background:#e9e9e9 url('/bold-image.png') no-repeat 9px 12px;}

有没有办法跳过:hover部分以上并使image.png＆＃34;更大胆＆＃34; （原始图像的大胆效果）？（无需为其创建图像）

Answer 1

实际上，不可能通过CSS改变图像的内容。但是，在这种特殊情况下，我们可以使用drop-shadow filter 伪造内容的粗体效果（假设图片是透明的，并且没有背景颜色附上！）：

.button {
    background: url('/image.png') no-repeat 9px 12px;
}

.button:hover {
    background: url('/image.png') no-repeat 9px 12px;
    -webkit-filter: drop-shadow(0 0 8px black); /* webkit only 
                     assuming the content is written in black */
    filter: drop-shadow(0 0 8px black);              /* FF~35 */
    filter: drop-shadow(0 0 0 8px black);              /* MDN */
}

可以看出，browser support is limited到基于Webkit的Web浏览器和Firefox 35+的写作。

以下是一个在线示例：

＆＃13;

.button-container {
  display: inline-block;
  background-color: #e9e9e9;
}

.button {
  width: 488px;
  height: 198px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  
  background: url('http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png') no-repeat 9px 12px;
}

.button:hover {
  background: url('http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png') no-repeat 9px 12px;
  -webkit-filter: drop-shadow(0 0 5px black); /* webkit only 
                 assuming the content is written in black */
  filter: drop-shadow(0 0 5px black);            /* FF~35 */
  filter: drop-shadow(0 0 0 5px black);            /* MDN */
}

＆＃13;

<div class="button-container">
  <button class="button"></button>
</div>

＆＃13;

基于Webkit的Web浏览器以及Firefox 35似乎不支持Mozilla Developer Network所述的语法，但是请让它留在即将推出的Web浏览器中。

Answer 2

你想要缩放效果吗？

尝试

img:hover {zoom:120%;}

Answer 3

background-size属性可以让您只在一个方向上缩放图像，这可能看起来也可能看起来不丑，但是从您的代码段开始，我不确定您是否正在使用精灵在那里，可能有更多的数字摆弄，而不是它的价值。 Browser support事实上是普遍的。

＆＃13;

.button {
  background-image: url('http://dummyimage.com/400x200/000/fff&text=Send');
  background-size: 100% 100%;
  background-position: center center;
}
.button:hover {
  background-size: 105% 100%;
}

＆＃13;

<a style="display:inline-block;width:400px;height:200px;" class="button">...</a>

＆＃13;

在悬停时在css中创建一个醒目的图像？

3 个答案: