Question

我是网络开发领域的新手，所以我陷入了背景本身。我尝试在html文件中拉伸这个图像（img3.jpg），他们说这些图像在HTML5中不支持，但是我得到了一些奇怪的输出，这是一个灾难，所以你能告诉我如何让我的图像伸展100％的网页??

 body {
background: #08121A;    background-image: url('../img3.jpg');
background-repeat: no-repeat;
margin:0;
padding:0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;

}

Answer 1

您可以像这样使用background-size: cover;

body {
    background: #08121A;
    /*-----------------------------*/
    background-image: url('../img3.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;
    /*-----------------------------*/
    margin:0;
    padding:0;
    font-family: 'Source Sans Pro', 'sans-serif';
    font-size: 1.1em;
    color: #545B64;
    font-weight: 300;
}

适用于：

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Answer 2

你从未指定宽度

width: 100%;

http://www.w3schools.com/cssref/pr_dim_width.asp

Answer 3

您缺少height和widht属性。

 body {
background: #08121A;    background-image: url('../img3.jpg');
background-repeat: no-repeat;
width:100%;
height:auto;
margin:0;
padding:0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;
}

Answer 4

body{   
    background: #08121A url("../img3.jpg") no-repeat center center;
    margin:0;
    padding:0;
    font-family: 'Source Sans Pro', 'sans-serif';
    font-size: 1.1em;
    color: #545B64;
    font-weight: 300;
    background-size: 100% 100%;
}
html{
    height: 100%;
}

在css中展示图像

4 个答案: