使用图像而不是背景颜色创建按钮？

Question

好的，所以我正在尝试制作一个按钮，但不是使用填充颜色并更改 :hover 上的颜色，我想使用图像作为背景并更改其在 :hover 上的不透明度。

这是一个 jsfiddle 来看看我想要做什么。第一个按钮是我要关闭的模板，但它对我的口味来说太无聊了。

我可以创建一个以图像为背景的按钮，但是当我设置和更改不透明度时，它显然会为所有子元素更改此设置，并且我需要文本不受影响。我还需要它以 100% 的宽度响应，以便它可以使用我网站上的包含网格来调整大小。

我试图创建一个容器 div，我放置了链接文本和一个 img src，并尝试执行 position:absolute 和 position/relative 但这会破坏容器 div。我确定我只是忽略了一些简单的事情，并且已经考虑了太久。

本质上，我在容器 div 中堆叠多个元素时遇到了麻烦，因此我可以将 :hover 定位为图像而不是其他任何东西。

任何帮助表示赞赏！

更新：

我想出了如何得到我想要的东西，如下所示：http://jsfiddle.net/6EMNM/

HTML

<div class="cma-button-wrapper">
<a href="#"><div class="cma-button-header">Header Text</div>
<div class="cma-button">
    <img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" />
    <p class="title">Bread Cat!</p></a>
</div></div>

CSS

.cma-button-wrapper {
    width:250px;
    }

.cma-button-wrapper img:hover  {
    opacity:.6;
    }


.cma-button-wrapper a{
    text-decoration:none;
    }
.cma-button a{
    /* force the div to properly contain the floated images: */
    position: relative;
    float: left;
    clear: none;
    overflow: hidden;
}
.cma-button img {
    position: relative;
    width:100%;
    height: auto;
    z-index: 1;
    opacity: .2;
}
/*.cma-button img:hover {
    opacity: .3;

}*/

.cma-button .title {
    font-size:1.9em;
    font-family: Helvetica, sans-serif;
    font-weight: lighter;
    display: block;
    position: absolute;
    width: 100%;
    top:10%;
    left: 0;
    z-index: 2;
    text-align: center;
}
.cma-button a {
    color:#000;
    }

.cma-button-header {
    font-family: Helvetica, sans-serif;
    font-weight: light;
    font-size:.9em;
    padding:.4em;
    color:#FFF;
    background-color:#FF7300;
    }

这很接近，但我如何做到这一点，以便当您将鼠标悬停在 .cma-button-wrapper 的任何子元素上时，img 会更改不透明度，但不会改变其他任何内容。纯CSS可以做到这一点还是我需要javascript？谢谢！

Answer 1

您有 2 种方法，它适用于所有浏览器：

.button-image:hover {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

或者您可以在 Photoshop 中创建 2 张图像。一个“button_image.png”和一个具有您想要的透明度的“button_image_hover.png”。应该是 PNG。

祝你有美好的一天！