暑期学习日记12：CSS背景

土肥圆波太郎

已于 2022-07-24 21:12:58 修改

阅读量117

点赞数

文章标签：学习

于 2022-07-22 21:26:08 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/125940242

版权

1.CSS背景元素包括：background-color，background-image，background-repeat，background-attachment，background-position。

2.background-color 属性指定元素的背景色，可以为任何 HTML 元素设置背景颜色。如下例将<body>元素背景设置为浅蓝色，<p>元素的背景设置为黄色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
	body {
		background-color: lightblue;
		}
	p {
			background-color: yellow
		}
	</style>
</head>
<body>
	<p>背景颜色举例</p>
</body>
</html>

显示效果为：

2.opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明，如：

	p {
		background-color: yellow;
		opacity: 0.5
		}

显示效果为：

3.background-image 属性指定用作元素背景的图像，默认情况下，图像会重复，以覆盖整个元素。如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
	body {
		background-image: url("bg.jpg");
		}
		h1 {
			position: absolute;
			left: 180px;
		}
	</style>
</head>
<body>
	<h1>背景图片举例</h1>
</body>
</html>

显示效果为：

4.默认情况下，background-image 属性在水平和垂直方向上都重复图像。设置background-repeat: no-repeat指定只显示一次背景图像，如：

	body {
		background-image: url("bg.jpg");
		background-repeat: no-repeat;
		}

显示效果为：

此外，background-repeat: repeat-x设置图片仅在水平方向重复，background-repeat: repeat-y设置图片仅在垂直方向重复。

6.background-position 属性用于指定背景图像的位置，如:

	body {
		background-image: url("bg.jpg");
		background-repeat: no-repeat;
		background-position: center top;
		}

显示效果为：

7.background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）。

（1）设置图片固定，则滚动网页时背景图片是固定的，如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
	body {
		background-image: url("bg.jpg");
		background-repeat: no-repeat;
		background-position: center top;
		background-attachment: fixed;
		}
		h1 {
			text-align: center
		}
	</style>
</head>
<body>
	<h1>背景图片举例</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
	<h1>背景图片滚动</h1>
</body>
</html>

显示效果为：

（2）设置图片滚动，则滚动网页时背景图片一起滚动，如：

	body {
		background-image: url("bg.jpg");
		background-repeat: no-repeat;
		background-position: center top;
		background-attachment: scroll;
		}

显示效果为：

8.如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。如上例可写为：

	body {
		background: url("bg.jpg"); no-repeat;center top;scroll;
		}

土肥圆波太郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫