Question

我正在尝试将图片设置为背景，但它不适合手机：

有没有其他方法可以在不更改带有@media属性的壁纸的情况下制作它？

我的HTML和CSS：

    body { 
/* Location of the image */
  background-image: url(../img/background.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
    }

 <!DOCTYPE html>
<html>
<head>
	  <link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>

<body>
<h1>ALOOOU</h1>
</body>

</html>

Answer 1

为您的身体添加视口高度，如下所示：

@media (max-width: 768px) {
    body {
        height:100vh;
    }
}

Answer 2

尝试将其用作html标记的全宽背景：

html { 
  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;
}

Answer 3

body标签只有100x100px。这个img标签充满了窗口。

body { 
  height: 100px;
  width: 100px;
/* normal body */
 }
.CanvasImg {
        background-position: center center;
        background-attachment: fixed;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border: 0;
        background: url("http://sendeyim.net/uploads/resim-galerisi/3d-masaustu-resimler_468650.jpg") no-repeat;
        background-size: cover !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !impoertant;
        opacity: 0.7;
    }

<!DOCTYPE html>
<html>
<head>
	  <link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>

<body>
 <img src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
                 class="CanvasImg"/>
<h1>ALOOOU</h1>
</body>

</html>

Answer 4

使用css：

body{height:100vh;
box-sizing:border-box;
overflow-y:hidden;}

CSS3为我们提供了视口相对单位：

vh相对于视口高度的1％，使用100vh将覆盖整个屏幕。
使用overflow-y 隐藏将删除水平滚动
border-box表示宽度和高度属性（和最小/最大属性）包括内容，填充和边框，但不包括保证金

移动设备上的背景图片不会全屏显示

4 个答案: