css 图片合成整体
时间: 2023-11-10 07:05:01 浏览: 63
可以使用 CSS 的 background 属性来实现图片合成整体的效果。具体做法是将多张图片合成一张大图,然后通过设置 background-position 来控制显示的位置。
例如,有三张图片 a.png、b.png、c.png,它们的大小都是 100px × 100px,我们可以将它们合成一张 300px × 100px 的大图,然后设置每个元素的 background-position 来显示对应的图片。
HTML 代码:
```
<div class="container">
<div class="item item-a"></div>
<div class="item item-b"></div>
<div class="item item-c"></div>
</div>
```
CSS 代码:
```
.container {
width: 300px;
height: 100px;
background-image: url('path/to/big-image.png');
}
.item {
width: 100px;
height: 100px;
}
.item-a {
background-position: 0 0;
}
.item-b {
background-position: -100px 0;
}
.item-c {
background-position: -200px 0;
}
```
这样就可以将三张图片合成整体了。
阅读全文