Question

好的，所以我试图制作一个按钮，而不是使用填充颜色并更改颜色：悬停我想使用图像作为背景并更改其不透明度：悬停。

这是一个jsfiddle，可以看到我想要做什么。第一个按钮是模板即将离开，但它太无聊我的口味。

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

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

基本上，我在容器div中堆叠多个元素时遇到问题，因此我可以定位：将鼠标悬停在图像上而不是其他内容。

任何帮助表示赞赏!!

更新：

我想出了如何得到我想要的东西，如下所示：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

您有两种方式，它适用于每个浏览器：

.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个图像。一个＆＃34; button_image.png＆＃34;一个＆＃34; button_image_hover.png＆＃34;你想要的透明度。应该是PNG。

度过美好的一天！

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

1 个答案: