Question

嘿所有人！我正在设置我的网站，我正试图找到一种方法让我的背景图像（或任何图像）根据内容重新调整自己的大小。

我的背景包括4个角，4个边和中间的填充。是否有可能重新调整大小？我想如何使用它的示例：

我的背景图片目前支持大约4个段落，而im位于底部。如果我想要7-8段怎么办？我是否必须手动将图像重新制作得更长，或者我可以将左边缘，右边缘，底部边角和底边图片以及它向下移动？我真的希望这是有道理的哈哈。

我不想拉伸图像，因为它失去了分辨率并且看起来很糟糕。

感谢您的时间。

Answer 1

没有

使角落和边缘分开图像。顶部/底部边缘应水平铺设;左/右边缘垂直。

然后将“中间”图像作为背景，以平铺或以其他方式缩放。 This answer可以帮助你。

Answer 2

您可以使用css3属性执行此操作。并非所有浏览器都支持此功能！

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

https://developer.mozilla.org/en/CSS/-moz-background-size

背景调整大小以适应内容？

2 个答案: