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;'或'background-size：contains;'但仍然没有运气，没有任何作品。是否有任何方法或替代方法可以使div（#bg）中的背景图像填满或填充容器或按比例拉伸div的宽度和高度（#bg）？

Answer 1

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

Demo

background-size: 100% 100%;

说明：您使用的background-size: 100%;仅适用于x而不适用于y，因此100%需要2 x，1 y }和{{1}}

的其他内容

Answer 2

嗯，你有这个解决方案背景大小：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')";

拉伸图像背景div或完整的背景图像在div

2 个答案: