关键词：background-image,属性,背景图,background,变形,剪切,小轻论坛,网站,代码,no-repeat,cover

最近做网站发现一个问题就是，网站上面的背景图由于元素容器的尺寸限制，但图片默认是展示照片所有细节，所以会对background背景图进行变形压缩。

如下图，左侧是修改前的变形图片，右图为修改后的剪切图片。

左侧样式为：style=”background: url({$query.thumb});background-size: 100% 100%” 

右侧样式为：style=”background: url({$query.thumb}) no-repeat;background-size: cover;background-position:center center”

其中，“no-repeat”是为了背景图不重复展示；“background-size: cover”是为了把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉；“background-position:center center”表示只展示背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置。

此时你会发现现在的背景图看起来好看些。

学会了么？赶紧去试一下。

小轻论坛还会原创分享更多经验，欢迎收藏网址并注册会员。

湖北,武汉,汉阳区