背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

2023-12-15css教程

367

下面是“背景图片自适应浏览器分辨率大小并自动拉伸全屏”的完整攻略。

设置背景图片

首先，在CSS文件或style标签中，使用如下代码设置背景图片：

body {
    background-image: url('your-image-url');
}

其中，your-image-url是自己准备的背景图片链接地址。

自适应浏览器分辨率大小

使用CSS中的 background-size 属性可以让背景图片自适应浏览器分辨率大小。

body {
  background: url('your-image-url') no-repeat center center fixed;
  /* 背景图居中 */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* 背景图按照元素的宽高比例缩放 */
  -moz-background-size:100% auto;
  background-size:100% auto;
}

background-size 属性用于设置背景图片的尺寸，它支持的值包括 cover 和 contain，以及具体的长度或百分比。

其中，cover 会缩放背景图片，让其完全覆盖元素，并保持宽高比例不变。而 contain 则会让背景图片缩放以适应元素，但不会让图片失去比例。

自动拉伸全屏

为了让背景图片自动拉伸全屏，我们要把body和html的height值设置为100%。

html,body{
    height:100%; 
}

这样，背景图片就可以自适应浏览器分辨率大小并自动拉伸全屏了。

示例说明

下面，通过两个示例说明如何实现“背景图片自适应浏览器分辨率大小并自动拉伸全屏”。

示例1：固定背景图片

在这个示例中，我们使用固定的背景图片，并通过以上CSS代码设置背景图片自适应浏览器分辨率大小并自动拉伸全屏。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景自适应浏览器大小</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="wrap">
        <h1>背景自适应浏览器大小</h1>
        <p>这是一段测试文本，用于测试背景图片的自适应效果。</p>
    </div>
</body>
</html>

CSS代码如下：

html,body{
    height:100%; 
}
body {
  background: url('https://images.unsplash.com/photo-1519052537078-e6302a4968b8?ixlib=rb-0.3.5&s=acaf2ae0acb9342b7c14b2d6f4e22c29&auto=format&fit=crop&w=500&q=60') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.wrap {
  position: relative;
  z-index: 1;
  padding-top: 20vh;
  text-align: center;
  color: #fff;
}

在浏览器中查看页面，可以发现背景图片已经完全覆盖了整个浏览器窗口，无论浏览器窗口大小如何变化，背景图片都能够自适应。

示例2：动态生成背景图片

在这个示例中，我们使用JavaScript动态生成背景图片，并通过以上CSS代码设置背景图片自适应浏览器分辨率大小并自动拉伸全屏。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景自适应浏览器大小</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="wrap">
        <h1>背景自适应浏览器大小</h1>
        <p>这是一段测试文本，用于测试背景图片的自适应效果。</p>
    </div>
    <script>
        // 生成随机背景图片链接
        var imgLink = "https://source.unsplash.com/random";
        // 设置背景图片
        document.body.style.backgroundImage = "url('" + imgLink + "')";
    </script>
</body>
</html>

CSS代码与示例1中的代码一样。

这个示例中，我们使用了 document.body.style.backgroundImage 来设置背景图片，其中 imgLink 是随机生成的背景图片链接。在浏览器中查看页面，可以发现每次刷新都会显示不同的背景图片，而背景图片也能够自适应浏览器分辨率大小并自动拉伸全屏。

The End

相关推荐

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

简单但很实用的5个css属性

我的css框架——base.css(重设浏览器默认样式)

兼做美工之导航条制作过程分享

JS 控制CSS样式表

Html5实现首页动态视频背景的示例代码

热门文章

热门精品源码

最新VIP资源