[分享]css3图片全部覆盖

CSS3中有很多新的特性，其中一个比较实用的特性就是可以使用CSS3实现图片的全部覆盖。这个特性在网页编排时非常有用，可以让网页看起来更加美观。img { : absolute; top: 0; le...

CSS3中有很多新的特性，其中一个比较实用的特性就是可以使用CSS3实现图片的全部覆盖。这个特性在网页编排时非常有用，可以让网页看起来更加美观。

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

上述代码实现了图片的全屏覆盖。其中，position: absolute让图片脱离正常文档流，top: 0和left: 0让图片定位在页面左上角，width和height分别设置为100%使图片充满整个屏幕。

同时，object-fit: cover属性会按比例拉伸图片，直到它覆盖整个容器，保持其原始的宽高比。

这个特性在实现全屏背景图时特别有用。可以将图片包裹在一个名为bg的容器中，然后给容器设置全屏宽高。

.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
} 

上述代码实现了全屏背景图。其中，position: fixed让背景图定位固定，overflow: hidden将背景图超出容器的部分隐藏，避免出现滚动条。

总之，在使用CSS3实现图片全部覆盖的效果时，我们可以使用position、width、height等属性来实现，结合object-fit属性进行比例缩放，使图片填满整个容器，实现更好的视觉效果。