下面是“背景图片自适应浏览器分辨率大小并自动拉伸全屏”的完整攻略。
设置背景图片
首先,在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
是随机生成的背景图片链接。在浏览器中查看页面,可以发现每次刷新都会显示不同的背景图片,而背景图片也能够自适应浏览器分辨率大小并自动拉伸全屏。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:背景图片自适应浏览器分辨率大小并自动拉伸全屏代码 - Python技术站