040_CSS3背景

最新推荐文章于 2022-10-25 15:17:23 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-10-25 15:17:23 发布

阅读量134

点赞数

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

本文链接：https://blog.csdn.net/aihiao/article/details/109148792

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 多个背景图像

1.1. CSS3允许您为元素使用多个背景图像。不同的背景图像用逗号隔开, 并且图像会彼此堆叠, 其中的第一幅图像最靠近观看者。

1.2. 例子

1.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3多个背景图像</title>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 530px;
				height: 480px;
				background-image: url(bg_flower.gif), url(bg_flower_2.gif);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

1.2.2. 效果图

2. background-size属性

2.1. background-size属性规定背景图像的尺寸。在CSS3之前, 背景图片的尺寸是由图片的实际尺寸决定的。

2.2. contain关键字将背景图像缩放为尽可能大的尺寸(但其宽度和高度都必须适合内容区域)。这样, 取决于背景图像和背景定位区域的比例, 可能存在一些未被背景图像覆盖的背景区域。

2.3. cover关键字会缩放背景图像, 以使内容区域完全被背景图像覆盖(其宽度和高度均等于或超过内容区域)。

2.4. 默认值

2.5. 可能值

2.6. 例子

2.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3设置背景图像的尺寸</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			div {
				width: 212px;
				height: 320px;
				background: #FFF0F0 url('bg_flower.gif') no-repeat;
				/*background-repeat: no-repeat;
				background-size: auto 100%;*/
				margin: 10px;
				border: dashed 10px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: 159px 240px;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: 75% 75%;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: contain;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: contain; padding: 30px;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<hr style="clear: left;" />
		<div style="background-size: contain; padding: 30px; background-origin: border-box;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: cover;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: cover; padding: 30px;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
		<div style="background-size: cover; padding: 30px; background-origin: border-box;">
			<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
			<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
		</div>
	</body>
</html>

2.6.2. 效果图

3. background-origin属性

3.1. background-origin属性规定background-position属性相对于什么位置来定位。

3.2. 如果背景图像的background-attachment属性为"fixed", 则该属性没有效果。

3.3. 默认值

3.4. 可能值

3.5. 例子

3.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3对背景图像定位</title>
		<meta charset="utf-8" />
		<style type="text/css">
			div {
				border: dashed 10px black;
				padding: 60px;
				background-image: url('bg_flower.gif');
				background-repeat: no-repeat;
				background-position: left;
				background-size: auto 100%;
			}
			#div1 {
				background-origin: border-box;
			}
			#div2 {
				background-origin: content-box;
			}
		</style>
	</head>
	<body>
		<p>background-origin:padding-box; 默认值</p>
		<div>
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>

		<p>background-origin:border-box;</p>
		<div id="div1">
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>

		<p>background-origin:content-box;</p>
		<div id="div2">
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>
	</body>
</html>

3.5.2. 效果图

4. background-clip属性

4.1. background-clip属性规定背景的绘制区域。

4.2. 默认值

4.3. 可能值

4.4. 例子

4.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3规定背景的绘制区域</title>
		<meta charset="utf-8" />
		<style type="text/css">
			div	{
				width: 200px;
				height: 200px;
				margin: 30px;
				padding: 50px;
				background-color: yellow;
				border: 10px dashed #92b901;
				float: left;
			}
			#div1 {
				background-clip: border-box;
			}
			#div2 {
				background-clip: padding-box;
			}
			#div3 {
				background-clip: content-box;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>
		<div id="div2">
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>
		<div id="div3">
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>
	</body>
</html>

4.4.2. 效果图