html - 在 div 上拉伸(stretch)图像背景或在 div 中拉伸(stretch)完整背景图像

Question

我有这个html结构

<div id="bg">

</div>

和一个CSS

#bg{
    background: transparent url(images/bg.png) no-repeat center center;
    background-size: 100%;
    width: 300px;
    height: 300px;
   }

从上面的代码可以看出，这个'background-size: 100%;'应该使 div(#bg) 中的背景图像填满 (#bg) 的整个容器，但不幸的是，它根本不起作用，即使我也尝试了 'background-size: cover;'或“背景大小:包含；”但仍然没有运气，没有任何效果。有没有什么方法或替代方法可以使 div(#bg) 中的背景图像充满或填充容器或按 div(#bg) 的宽度和高度按比例拉伸(stretch)？

Answer 1

实际上您忘记了属性声明中的一个参数

Demo

background-size: 100% 100%;

说明:您正在使用 background-size: 100%; 这仅适用于 x 而不适用于 y 因此您需要有 2 个 100%，1 个用于 x，另一个用于 y