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

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

设置背景图片

首先,在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 属性用于设置背景图片的尺寸,它支持的值包括 covercontain,以及具体的长度或百分比。

其中,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 是随机生成的背景图片链接。在浏览器中查看页面,可以发现每次刷新都会显示不同的背景图片,而背景图片也能够自适应浏览器分辨率大小并自动拉伸全屏。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:背景图片自适应浏览器分辨率大小并自动拉伸全屏代码 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • PS历经25年,最好用的免费PS插件统计

    PS(Photoshop)是目前最为流行的图像处理软件之一,它的强大功能得益于丰富的插件资源。为让大家更好地了解PS插件,本文将分享最好用的免费PS插件以及如何安装使用。 一、免费PS插件推荐 1. Camera Raw 相机原始文件是一种未经处理的照片格式,需要PS插件才能打开和编辑。作为Adobe官方出品的插件,Camera Raw可识别各种相机品牌的原…

    css 2023年6月11日
    00
  • js仿微信公众平台打标签功能

    当我们想对一堆数据进行分类时,最常见的方法就是给它们打上标签。仿微信公众平台打标签功能就是实现这个功能的一个应用。 本攻略将基于JavaScript实现仿微信公众平台打标签功能,主要实现以下几个功能: 创建标签:用户可以在应用中创建标签,每个标签都具有一个唯一的标识符和一个名称。 编辑标签:用户可以编辑标签的名称。 删除标签:用户可以删除一个或多个标签。 给…

    css 2023年6月10日
    00
  • CSS first-letter实现首字下沉

    以下是关于CSS :first-letter 选择器实现首字下沉的攻略: 简介 首字下沉,也称作首行缩进,是指文章或段落第一行文字向内缩进一定的距离。通过CSS :first-letter 伪类选择器,我们可以对文本的第一个字符进行特别的样式设计,其中包括下沉、加粗、字体等等。 步骤 通过以下步骤,我们可以实现一个简单的首字下沉样式: 首先,我们需要创建一个…

    css 2023年6月9日
    00
  • CSS中的clip-path区域裁剪属性使用教程

    下面就是关于CSS中的clip-path区域裁剪属性的完整攻略: 什么是clip-path区域裁剪属性 clip-path是CSS中一种用于剪切元素区域的属性。这个属性允许你在网页上创建具有各种形状的元素,并使它们融入到整个设计中去。 clip-path属性非常强大,它可以用来创造各种形状,例如圆形、三角形、多边形等。它可以被用于剪切图片,文字或任何其他元素…

    css 2023年6月11日
    00
  • 倾力总结40条常见的移动端Web页面问题解决方案

    针对“倾力总结40条常见的移动端Web页面问题解决方案”的完整攻略,我会从以下几个方面进行详细讲解: 文章题目和简介 文章题目为“倾力总结40条常见的移动端Web页面问题解决方案”,主要介绍了40个常见的移动端Web页面问题的解决方案,涵盖了页面布局、字体显示、图片加载、滚动效果等多方面内容。 文章结构和颜色渐变块 文章采用了层次分明的结构,将40个解决方案…

    css 2023年6月10日
    00
  • js+canvas实现代码雨效果

    下面是详细的“js+canvas实现代码雨效果”的攻略。 1. canvas基础知识 在使用canvas实现代码雨效果前,需要掌握以下canvas基础知识: 创建canvas标签:<canvas id=”canvas”></canvas> 获取canvas元素:var canvas = document.getElementById(…

    css 2023年6月10日
    00
  • HTML 结构化实现方法

    下面是HTML结构化实现方法的完整攻略: 第一步:确定页面结构 在开发网页前,我们需要先确定我们网页的结构,这样才能更好地进行开发。一般来说,一个网页的结构包含了头部(header)、导航(nav)、主体(main)、侧边栏(sidebar)以及尾部(footer)等几个部分。在确定这些结构的时候,我们可以参考网站的设计稿或者是对现有网站的分析,确定出这些结…

    css 2023年6月10日
    00
  • php+ajax制作无刷新留言板

    让我来详细讲解一下PHP+Aajx制作无刷新留言板的完整攻略。 1. 确定需求 在开始之前,我们需要先确定需求,以便清晰地了解要实现哪些功能。通常,一个简单的留言板需要的功能包括: 用户可以在留言板上发布留言,留言包括标题和内容; 用户可以查看已发布的留言列表,每个留言包括标题、内容和发布时间。 接下来,我们将实现这两个功能。 2. 设计数据库 在开始编写代…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部