我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
background-size: 100% 100%;
拉伸背景以填充两个轴上的整个元素。
其他回答
使用下面的CSS:
背景尺寸:100% 100%
使用下面的CSS:
background: url('img.png') no-repeat;
background-size: 100%;
实际上，您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低，设置position:absolute，并为前景中的每个盒子使用透明背景。
为了根据容器大小适当缩放图像，请使用以下方法:
background-size: contain;
background-repeat: no-repeat;
我使用了background- x CSS属性的组合来实现理想的缩放背景图像。
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
这使得背景总是覆盖整个浏览器窗口，并在缩放时保持居中。
