如何让你的背景图片完美的显示在你的浏览器上

你们都知道背景图片是怎么设置的,但是如何让他完美的显示在你的浏览器上你们可能不知道吧。下面我就来解决这个问题。

<style>
	body{
		background:url(动漫/1004.jpg) no-repeat;
		}
</style>
<body></body>

效果如下:
在这里插入图片描述
加上background-size这个属性

<style>
	body{
		background:url(动漫/1004.jpg);
		background-size:cover;
		}
</style>
<body></body>

结果如下:
在这里插入图片描述
而且背景图片会随着你的浏览器宽度变化而变化。
下面三张图片是宽度变化后的背景图片:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
其实background-size:这个属性是控制背景图片大小的。
它的所有值如下图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44116816/article/details/86517774