html - 在 HTML 和 CSS 中，无法在我的按钮前正确看到我的图标

Question

我尝试创建一个背景，当悬停在该背景上时会显示 2 个按钮。这些按钮中的每一个都应该有一个不同的图标。

我还尝试在 css 中将每个图标的颜色从黑色更改为白色。

但出于某种原因，我无法看到按钮前面的完整图标

http://jsfiddle.net/72XyL/225/

HTML:

<div class="show-image">
    <div onclick="window.open('http://www.google.co.uk','mywindow');" style="cursor: hand;" class="update">
        <div class="img"></div>
    </div>
    <div onclick="window.open('http://www.google.co.uk','mywindow');" style="cursor: hand;" class="delete">
        <div class="img"></div>
    </div>
    <img src="http://www.doylecollection.com/var/doyle/storage/images/media/photo-galleries/the-dupont-circle-hotel-gallery/rooms/dupont-circle-hotel-superior-king-room/36016-1-eng-US/dupont-circle-hotel-superior-king-room_gallery_image.jpg" class="background" />
</div>

CSS:

div.show-image {
    position: relative;
    float:left;
    margin:5px;
}
div.show-image:hover img {
    opacity:1;
}
div.show-image:hover div {
    display: block;
    opacity:1;
}
div.show-image div {
    position:absolute;
    display:none;
}

.background {width:600px;height:400px;}

.update {
    top:45%;
    left:30%;
    width: 25px;
    height:25px;
    margin-right: 4px;
    background-color: #de543e;
    padding: 16px 18px;
    cursor: pointer;
    opacity: 0.9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    border-radius: 80px;
    z-index:1;
}
.show-image .update .img{
    background-color:#fff;
    -webkit-mask-image: url('http://www.clipartbest.com/cliparts/MiL/LKL/MiLLKLegT.png');
    width: 25px;
    height:25px;
    z-index:2000;
}
.show-image .delete .img {
    background-color:#fff;
    -webkit-mask-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2014/12/black-white-metro-calendar-icon.png');
    width: 25px;
    height:25px;
    z-index:2000;
}
.delete {
    top:45%;
    left:55%;
    width: 25px;
    height:25px;
    margin-right: 4px;
    background-color: #de543e;
    padding: 16px 18px;
    cursor: pointer;
    opacity: 0.9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    border-radius: 80px;
}

Answer 1

尽管由于 limited browser support，我不建议使用 css 掩码，为了解决您的问题，您需要将以下 css 添加到 .show-image .img:

.show-image .img{
    -webkit-mask-position: 0;
    -webkit-mask-size: 24px;
    -webkit-mask-repeat: no-repeat;
 }

这个答案考虑了您当前的代码，显然只适用于 webkit 浏览器。