css 图片上面加图标

在网页设计中，想要让图片更加生动有趣，我们可以使用图标来进行装饰。那么，怎么在图片上面加上图标呢？这时候，CSS的background-image和:after伪类就会派上用场。首先，在HTML中创建一个div元素，给它设置一个class名，以便后面能够使用CSS样式进行设置。在这个div中，我们可以添加一张图片，通过CSS中的background-image将它作为背景图片，代码如下：

<div class="picture">
    <img src="picture.jpg" alt="picture">
</div>

接下来，我们可以通过CSS样式来设置这个div的背景图片，并且通过:after伪类来添加图标。这个图标将会置于图片的上方，通过这种方式实现图片上加图标的效果。

css 图片上面加图标

.picture {
    position: relative;
    background-image: url(picture.jpg);
    background-size: cover;
}

.picture:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background-image: url(icon.png);
}

CSS中，通过将这个div元素设置为相对定位（position: relative），我们为接下来的:after伪类设置一个绝对定位（position: absolute）。通过设置top和left属性，我们可以控制图标在图片中的位置。而通过background-image属性，我们可以给图标添加上所需的装饰。经过以上的设置，现在我们已经成功地将图标放置在了图片上方。值得注意的是，通过调整top和left的属性值，我们还可以让图标在任何需要的位置进行排版，随着需求的变化而变化，这是一种非常有用的技巧。总的来说，使用CSS，我们可以轻松实现图片上加图标的效果。只要做好定位和样式的调整，我们就可以在网页设计中像是类似的需求提供更加多样化的选择。

css 图片上面加图标

相关文章