当前位置：文江博客话题详情

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

发布于 2024-11-03 03:56:43 字数 279 浏览 5 评论 0原文

嘿大家！我正在设置我的网站，我正在尝试找到一种方法让我的背景图像（或任何图像）根据内容自行调整其大小。

我的背景由 4 个角、4 个边和中间的填充组成。是否可以重新调整大小？我想如何使用它的示例：

我的背景图像当前支持大约 4 个段落，并且位于底部。如果我想要 7-8 段怎么办？我是否需要手动将图像重新制作得更长，或者我可以让它拍摄左边缘、右边缘、底角和底边缘图片并将其向下吗？我真的希望这是有道理的哈哈。

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

感谢您抽出时间。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

关于从前 2024-11-10 03:56:43

不。

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

然后将“中间”图像作为背景，平铺或以其他方式缩放。这个答案可能会对您有所帮助。

回复收藏 0 原文

猥琐帝 2024-11-10 03:56:43

您可以使用 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 -大小

You can do this using css3 properties. Not all browsers support this yet!

.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

回复收藏 0 原文

~没有更多了~