让我来详细讲解一下如何使用 CSS 设置 body 背景图片满屏的实例代码。
基本步骤
使用 CSS 设置背景图片，需要遵循以下基本步骤：
- 在 HTML 页面中的 head 标签内添加样式表链接：
html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
- 在样式表（styles.css）中添加背景图片属性：
css
body {
background-image: url("background.jpg");
}
- 通过 CSS 代码对背景图片进行设置。
下面是一些常用的 CSS 属性：
background-repeat: 设置图片是否重复显示。可选值为repeat,repeat-x,repeat-y, 或no-repeat。background-position: 设置背景图片的位置。background-size: 设置背景图片的大小。可选值为auto,cover, 或contain。
示例说明
示例一
以下示例代码将设置 body 背景图片为 "background.jpg"，并将其设置为不重复显示。在最后一行代码中，使用 background-size 属性将背景图片的大小设置为 cover。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 设置背景图片满屏的实例</title>
<style>
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h1>CSS 设置背景图片满屏的实例</h1>
<p>这是一个背景图片。</p>
</body>
</html>
示例二
以下示例代码将设置 body 背景图片为多个图片（background1.jpg 和 background2.jpg），并将其设置为横向重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 设置背景图片满屏的实例</title>
<style>
body {
background-image: url("background1.jpg"), url("background2.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>CSS 设置背景图片满屏的实例</h1>
<p>这是一个背景图片。</p>
</body>
</html>
以上就是设置 CSS 背景图片满屏的详细攻略，希望对您有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css设置body背景图片满屏的实例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 