0

我想在图像上添加一个图标。我正在尝试关注，但它似乎不起作用：

HTML：

<ul>
    <li>
        <div class="icon">
            <img src="image.jpg" />
        </div>
    </li>
</ul>

CSS：

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    background : url("icon_quick.gif") no-repeat;
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

演示：http: //jsfiddle.net/tqw4V/

4

4 回答 4

2

无需修改标记。您的内容图像（绘画）保留在标记中，而装饰图像（笑脸）保留在 CSS 中。

http://jsfiddle.net/tqw4V/6/

ul{
    margin: 0;
    list-style: none;
    /*position: relative;  */  
}

.icon{
    /*z-index: 2;
    overflow: hidden;*/
    position: relative;
}

.icon:before {
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    height: 100px;
    width: 100px;
    content: '';
    position: absolute;
}
于 2013-03-03T15:08:11.457 回答
1

您可以更好地更改您的 HTML，因为您在背景顶部添加了一个内部子级，这会将其推开。

HTML

<ul>
    <li>
        <div class="icon"></div>
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
        </li>
</ul>

CSS

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    width:100px; height:100px;
    background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 2;
    overflow: hidden;
    position:absolute;
}

JSF中。

于 2013-03-03T14:58:46.237 回答
0

只需更换图像。更换他们的位置。笑脸应该去html，而另一个去css。然后通过高度和宽度可以设置容器的大小。希望我有所帮助。

于 2013-03-03T14:54:39.710 回答
0

这是一种方法：http: //jsfiddle.net/tqw4V/1/

不幸的是，它需要修改您的标记，但它可以工作。这个想法是让覆盖图像成为一个单独的元素，你绝对定位在你的主要元素之上。如果主要元素本身不是绝对定位的，这会更好。

HTML：

<ul>
    <li>
        <div class="icon">
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
            <div class="overlay"></div>
        </div>
        </li>
</ul>

CSS：

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 4;
}
}
于 2013-03-03T14:58:42.097 回答