首页 文章

如何拉伸背景图像以覆盖整个HTML元素？

提问于
浏览 次
78

我正在尝试获取HTML元素（body，div等）的背景图像以拉伸其整个宽度和高度 .

没有太多运气 . 除了作为背景图像之外，它是否可能或者我必须以其他方式做到这一点？

我目前的CSS是：

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

提前致谢 .

编辑：我并不热衷于在Gabriel的建议中维护CSS，所以我改变了页面的布局 . 但这似乎是最好的答案，所以我将其标记为这样 .

html css background-image

10 回答

  • 0

    总之，你可以尝试这....

    <div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

    我用过少量css和js的地方......

    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

    它对我来说很好 .

    回复于
  • 8
    <style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
    回复于
  • 4
    回复于
  • 14

    不确定是否可以拉伸背景图像 . 如果您发现在所有目标浏览器中都不可能或不可靠，您可以尝试使用z-index设置为较低的拉伸img标记，并将位置设置为绝对，以便其他内容显示在其上 .

    让我们知道你最终做了什么 .

    编辑：我建议的基本上是加布里埃尔的链接 . 所以尝试:)

    回复于
  • 4

    要扩展@PhiLho答案，您可以将一个非常大的图像（或任何大小的图像）居中在页面上：

    { 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

    或者您可以使用背景颜色与图像背景相匹配的较小图像（如果它是纯色） . 这可能适合您的目的，也可能不适合您 .

    { 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
    回复于
  • 6

    如果您需要在调整屏幕大小时拉伸背景图像，并且不需要与旧浏览器版本兼容，则可以执行以下操作：

    body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
    回复于
  • 2

    如果您有一个大的横向图像，此示例此处在纵向模式下调整背景大小，以便它显示在顶部，在底部留空：

    html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
    回复于
  • 3

    我主要使用以下代码来实现问题效果：

    body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
    回复于
  • 3
    background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
    回复于
  • 172

    你不能在纯CSS中 . 在所有其他组件后面覆盖整个页面的图像可能是您最好的选择（看起来就像上面给出的解决方案） . 无论如何，无论如何，它看起来很糟糕 . 我会尝试一个足够大的图像来覆盖大多数屏幕分辨率（比如高达1600x1200，高于稀疏度），限制页面的宽度，或者只是使用平铺图像 .

    回复于

相关问题