html - 拉伸 div 上的图像背景或 div 中的完整背景图像

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;
   }

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

Answer 1

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

演示

background-size: 100% 100%;

说明：您正在使用background-size: 100%;which 仅适用于x而不适用于，y因此您需要 2 100%, 1 用于 thex和 other fory

Answer 2

好吧，你有这个解决方案 background-size:100% 100%;

但它不适用于所有浏览器，如果你想要修复 IE8,7 和 6（我认为）你可以试试这个：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale')";