Web前端开发笔记之CSS拓展04——背景图大小、过渡

1.背景图片大小

很多时候我们在使用图片的时候，会发现图片和我们的盒子大小不匹配的情况。

 

.picPart{
            width: 300px;
            height: 500px;
            background-image: url("/Res/video&photo/tanzhilang.jpeg");
        }

当我们你使用背景图时，盒子太小，图片会被切割，如下：

这时大小属性就派上用了。

.picPart{
            display: inline-block;
            width: 300px;
            height: 500px;
            background-image: url("/Res/video&photo/tanzhilang.jpeg");
            background-size: 100% 100%;
        }

这样图片就会完美的覆盖整个盒子。

这里我们拓展一下background连写的完整版本。

 2.过渡

用于使元素样式变化速度可以调整，以使其更加柔和。