如何用单张图片做背景不重复自适应铺满容器背景

2024-10-14 21:48:26

1、显示器分辨率为1680X1050，div大小为1300X790，图像原始大小为1024X768，设就女蒿鸳置了margin:40px，加了边框，现在body和div用同一张图作背景，设置了背景图不重复，如下图。《不能铺满容器》下面是body和div的样式代码：<body style="background:url(./12.jpg) no-repeat;" ><div style="background:url(./12.jpg) no-repeat;margin:50px;height:790px;width:1300px;border:2px red solid;">

3、现在看看用background-size 属性规定背景图像的尺寸,使用参数值cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域）的效果，是不是完美填满容器又不要图像重复。下面是body和div的样式代码：<body style="background:url(./12.jpg) no-repeat;" ><div style="background:url(./12.jpg) ;background-size:cover; margin:50px;height:790px;width:1300px;border:2px red solid;">

5、还有，使用background-attachment属性还可设置背景图像是否随着容器的滚动而滚动，这个在这里就不详述了。