html-CSS的背景样式background

最新推荐文章于 2023-07-16 13:47:10 发布

¡Venceremo

最新推荐文章于 2023-07-16 13:47:10 发布

阅读量311

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125742584

版权

笔记专栏收录该内容

52 篇文章 2 订阅

订阅专栏

本文介绍了如何使用CSS设置背景颜色、背景图片，包括背景图片的位置、重复方式和固定属性。通过实例展示了当盒子尺寸大于图片时，如何避免图片重复排列，并利用`background`缩写属性简化代码。同时，文章还探讨了如何使用内外部样式实现背景图片的延申效果以及居中显示的`margin: 0 auto;`方法。

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

css运行使用纯色作为背景色也可以是背景图像

属性名	属性值
background-color	设置元素背景色
background-imag	把图片设置为背景
background-position	设置背景图片的起始位置
background-repeat	设置背景图片的重复方式
background-attachment	设置背景图片是否固定或者随页面的其余部分滚动

发现盒子大小大于图片，此时图片会重复排列

设置背景图片不重复

background-position:可以有两个值一个指定元素放的位置元素放置的位置图片显示的开始

默认是剧中 top bottom left right

还可以使用一个元素进行综合指定

background:颜色图片重复方式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
</head>
	<style type="text/css">
		.box{
			width: 1300px;
			height: 900px;
			/*
			background-color: chocolate;
			background-image: url(../images/logo.png);
			background-repeat:no-repeat;
			*/
			background:#5BF507 url(../images/logo.png) no-repeat;
			background-position:left top;
		}
		
	</style>
<body>
	<div class="box"></div>
	
	
</body>
</html>

实线延申的效果

内部样式的方法

margin: 0 auto; 居中显示的含义

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
</head>
	<style type="text/css">
		.outer{
			width: 1280px;
			height: 10000px;
			margin: 0 auto;
			background: url(../images/1.jpg) repeat-y left top;
	}

	.inner{
		background: url(../images/2.jpg) no-repeat left top;
		height: 712px;

}

	</style>
<body>
	<div class="outer">
			<div class="inner">
			</div>
		</div>
	
	
</body>
</html>