css 设置全屏背景图片

在网页设计中，有时我们想要一张绚烂的图片作为背景，以吸引用户的目光。简单的设置往往不能达到预期的效果。如果你也遇到了这样的问题，不妨试试以下的解决方案。

你可能会尝试使用CSS来设置背景图片，如 `body{ background:url(img.jpg); background-position:center; background-repeat:no-repeat; }`。这种方法往往会让图片无法完全覆盖整个页面，显得不够壮观。

为了解决这个问题，我们可以使用一个DIV层来装载IMG标签，以实现全屏拉伸的效果。具体操作如下：

然后，通过CSS来设置这个DIV层及其内部的IMG标签。将DIV层固定于屏幕四个角落，占据全屏，设置`z-index:-1`使其作为背景层。设置IMG标签的高度和宽度为100%，以实现图片的拉伸并最大化展示。

这样设置后，无论用户如何拉伸浏览器或调整网页位置，背景图片都会始终居中并全屏显示。在火狐狸等浏览器中，效果尤为出色，能够自动羽化图片细节，使得背景图片更加生动逼真。

需要注意的是，由于这个背景图片是一个层，所以用户在页面空白处右键时，会显示图片信息，可能会给用户带来一些不便。由于IE在图像拉伸后像素点显示较为粗糙，建议选用高分辨率的图像作为背景。

这个方法能够较好地实现全屏拉伸的背景图片效果。如果你是新手，可以多加练习，高手则可以根据实际需求进一步优化。

由夜闻香原创，仅供参考。在实际应用中，请根据具体情况进行调整。希望这个解决方案能够帮助到你，如果有任何问题，欢迎随时向我提问。