我如何使CSS背景的一部分完美地适合浏览器

How do i make part of a CSS background fit perfectly to a browser

本文关键字：完美 浏览器 一部分 何使 CSS 背景      更新时间：2023-09-26

我是一个新手，所以我真的不知道如何描述它，但这里有一个例子:网站

正如你所看到的，在网站顶部的背景图像在高度和宽度上完美地适合任何浏览器的空间，无论分辨率如何。当您向下滚动页面时，它会保持相同的样式，其中特定的背景颜色非常适合浏览器的空间。我在笔记本电脑和手机上进行了测试，每次都非常合适。我如何做到这一点?它是可行的纯粹从CSS或我必须涉及JavaScript/Jquery等?我看过很多网站使用这种特定的风格，我想知道它是如何完成的。

我不是特别要求代码，只是一个答案，说明它是什么，我应该搜索。代码是值得赞赏的。

您可以使用浏览器的开发人员工具来查看该站点如何创建效果。它是CSS和JavaScript的结合。

CSS: 

.homepage-intro.homepage {
    background: url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg") no-repeat;
    background-size: cover;
}

JavaScript然后显式设置<div>的高度以匹配浏览器窗口

有不同的方法。如果你查看你链接的网站，他们正在使用背景掩护来完成这一点。background-size: cover;填充当前div的宽度和高度

请参阅本文获取更多信息:https://css-tricks.com/perfect-full-page-background-image/

该站点使用JavaScript设置具有该背景图像的<div>的高度。结合background-size: cover;，应该可以。

如果你想确保div的底部与浏览器窗口的底部重合，你可以通过CSS来实现。

CSS 

div {
    height:100vh;
}

或

body, html {
   height: 100%;
}
div {
  height: 100%;
}

您将需要CSS和jQuery来有效地做到这一点(并且还允许跨浏览器支持)。

CSS 

//Add this to your background image's CSS.
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
  height: 100%;
jQuery 

var viewportHeight = jQuery(window).height();
//wrote an if statement to allow for a minimum height. You can remove this if statement if you don't need it.
if(viewportHeight>500){
     jQuery('page-wrapper').height(viewportHeight);
}else{
     jQuery('page-wrapper').height(500);
}

要解决这个问题，需要完成两项任务:

  1. 使背景图像始终调整为容器的大小。正如其他人已经说过的那样，这是通过将background-size: cover;赋值给放置图像的容器元素作为background-image来实现的。添加background-position: center;可以在低分辨率设备和纵向方向上获得更好的效果。

  2. 确保容器元素在两个方向上伸展100%的视口宽度。块级元素默认抓取100%的可用宽度，但你需要设置一个明确的高度来匹配所需的布局。这可以通过对容器元素应用height: 100vh;(100%视口高度)来实现。检查单元vh在您规划布局的设备上是否可用:http://caniuse.com/#search=vh

如果你需要支持不识别vh的浏览器，这可能是最简单的解决方案，使用javascript(或jQuery)动态地为你的容器元素分配一个高度。

这是如何在jQuery中完成的<div id="my-container-element"></div>

$("#my-container-element").height($(window).css("height");

纯Javascript相同:

document.getElementById("my-container-element").style.height(window.innerHeight+"px");

在您的CSS表中尝试以下操作:

html {  background: url(myImage.jpg) no-repeat center center fixed; background-size: cover;}

它将用你的背景图片填充整个页面。

相关文章：