Question

我的网站上有背景图片。我想使用媒体查询使用浏览器窗口调整背景图像的大小。我是媒体查询概念的新手，请你告诉我该怎么做？

谢谢：）

在我的CSS文件中：

.homepage{background-image:url(../images/work.jpg); background-repeat:no-repeat;}

在我的HTML文件中

<body class="homepage">

</body>

Answer 1

您需要在样式表中使用媒体查询来获取特定的屏幕分辨率，例如

@media all and (max-width: 1200px) and (min-width: 520px) {
  body {
    /* Now whatever styles you use here will be applicable for your specified screen widths */
  }
}

所以提出你的问题，我认为你希望你的身体背景根据屏幕分辨率自动调整，你可以试试这个，而不使用媒体查询..

html { 
    background: url('/* Path to image file */') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如何使用媒体查询使用浏览器窗口调整背景图像的大小

1 个答案: