CSS 3之背景图片（二）

最新推荐文章于 2024-01-10 20:26:17 发布

菇毒

最新推荐文章于 2024-01-10 20:26:17 发布

阅读量237

点赞数

分类专栏： web 前端学习 # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125385899

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

本文介绍了如何利用background-attachment属性实现背景图片的固定显示，使其覆盖多屏页面，并通过background-repeat属性控制图片的垂直重复效果。实例代码展示了如何在HTML中运用这些技术。

摘要由CSDN通过智能技术生成

1. 背景图片滚动效果

若网页的文本较多，出现了多屏页面，此时背景图片若不能覆盖页面，就会出现看不到背景图片的现象；
使用 background-attachment 属性，用来设定背景图片是否随文档一起滚动；
background-attachment 属性包含了两个属性值：scroll 和 fixed，适用于所有元素；
20220509 例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景演示方式</title>
		<style>
			body{
				background-image: url(13.webp);
				background-repeat: no-repeat;
				background-attachment: fixed;
			}
			p{
				text-align: center;
			}
			h1{
				text-align: center;
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>短歌行</h1>
		<p>对酒当歌，人生几何？</p>
		<p>譬如朝露，去日苦多。</p>
		<p>概当以康，忧思难忘。</p>
		<p>何以解忧，唯有杜康。</p>
		<p>青青子衿，悠悠我心。</p>
		<p>但为君故，沉吟至今。</p>
		<p>呦呦鹿鸣，食野之苹。</p>
		<p>我有嘉宾，鼓瑟吹笙。</p>
		<p>明明如月，何时可掇。</p>
		<p>忧从中来，不可断绝。</p>
		<p>越陌度阡，枉用相存。</p>
		<p>契阔谈宴，心念旧恩。</p>
		<p>月明星稀，乌鹊南飞。</p>
		<p>绕树三匝，何枝可依？</p>
		<p>山不厌高，海不厌深。</p>
		<p>周公吐哺，天下归心。</p>
		<h1>短歌行</h1>
		<p>对酒当歌，人生几何？</p>
		<p>譬如朝露，去日苦多。</p>
		<p>概当以康，忧思难忘。</p>
		<p>何以解忧，唯有杜康。</p>
		<p>青青子衿，悠悠我心。</p>
		<p>但为君故，沉吟至今。</p>
		<p>呦呦鹿鸣，食野之苹。</p>
		<p>我有嘉宾，鼓瑟吹笙。</p>
		<p>明明如月，何时可掇。</p>
		<p>忧从中来，不可断绝。</p>
		<p>越陌度阡，枉用相存。</p>
		<p>契阔谈宴，心念旧恩。</p>
		<p>月明星稀，乌鹊南飞。</p>
		<p>绕树三匝，何枝可依？</p>
		<p>山不厌高，海不厌深。</p>
		<p>周公吐哺，天下归心。</p>
	</body>
</html>

20220509 background-attachment 属性的值为fixed时，背景图片的位置固定并不是相对于页面的，而是相对于页面的可视范围；

2. 背景图片重复效果

使用 background-repeat 属性，设置的重复方式，包括水平重复、垂直重复与不重复等
background-repeat 属性用于设定背景图片师傅重复平铺；
20220509 例子 2：背景图片垂直重复

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片重复</title>
		<style>
			body{
				background-image: url(3.webp);
				background-repeat: repeat-y;
				
			}
		</style>
	</head>
	<body>
	</body>
</html>