CSS背景样式属性

最新推荐文章于 2022-06-27 22:01:20 发布

杨旭华　

最新推荐文章于 2022-06-27 22:01:20 发布

阅读量587

点赞数 5

本文链接：https://blog.csdn.net/Yxh666/article/details/102866024

版权

1.背景颜色

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景颜色</title>
	<style>
		.box{
			width: 100px;	/*背景宽度*/
			height: 100px;	/*背景高度*/
			background-color: #f00;		/*用于给元素设置背景颜色*/
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

下面是效果图：
在这里插入图片描述图一

注意：

background-color 用于给元素设置背景颜色，但是前提这个元素要么有内容，要么有宽度和高度才可以

2.背景图片

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景图片</title>
	<style>
		.box{
			width: 1000px;  /*给图片加宽度*/
			height: 1000px;	/*给图片加高度*/
			background-image: url(图片地址);	
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

效果图如下
background-image 用于给元素设置背景图片，图片的地址一定放在 url(图片地址)，但是这个元素要么有内容，要么有宽度和高度才可以，背景图片默认是平铺的

在这里插入图片描述图二

... ...
<body>
	<img src="图片地址">
	/*这个也是插入图片，但是仅仅只是插入图片，不是设置背景图片*/
	<div class="box"></div>
</body>
... ...

在这里插入图片描述
图三

上图是img标签的效果，可以看到就是插入一张图拍，并不是设置背景图

3.背景图片平铺

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景图片平铺</title>
	<style>
		.box{
			width: 1000px;  /*给图片加宽度*/
			height: 1000px;	/*给图片加高度*/
			background-image: url(图片地址);
			background-repeat: repeat;	/*表示图片是平铺的*/
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

效果如图二所示

... ...
			background-image: url(图片地址);
			border:1px solid #f00;	/*设置一个边框*/
			background-repeat: repeat-x;	/*表示图片是水平方向平铺的*/
		}
	</style>
... ...

效果如下：
在这里插入图片描述

			background-repeat: repeat-y;	/*表示图片是垂直平铺的*/

垂直平铺效果：
在这里插入图片描述

background-repeat: no-repeat;	/*表示图片是没有平铺的*/

效果如下：
在这里插入图片描述

background-repeat 是用于设置背景图片是否平铺，repeat（是平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）、no-repeat（不平铺）

4.背景图片的位置

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景图片平铺</title>
	<style>
		.box{
			/*给div设置参数*/
			width: 1000px;  
			height: 600px;
			border: 1px solid #000;
			margin-right: auto;
			margin-left: auto;
			/*插入一张图片*/
			background-image: url(图片地址);
			background-repeat: no-repeat;	/*设置图片不平铺*/
			background-position: right/*<--水平位置*/ top/*<--垂直位置*/;		/*背景图片位置  使用英文单词来表示*/
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

效果图：

在这里插入图片描述

background-position 用于设置背景图片的位置。如果要设置背景图片的位置，这个属性就会有两个值

background-position水平位置、垂直位置，这两个位置的表示方式有三种：英文单词、固定值、百分比

 英文单词的表示方式
 	水平位置：left(居左)、	center(居中)	、right(居右)	
 	垂直位置：tou(居上)、	center(居中)	、bottom(居下)

固定值的表示如下：

background-position: 100px 100px;	/*背景图片位置  使用固定值来表示*/

效果图如下，图片的左上定点距上面的线和它左面的线距离是我们设置的100px
在这里插入图片描述

百分比的表示效果如下：

效果如下：
在这里插入图片描述

以上三种位置的表示方式是可以混合使用的

cssbackground-position: 100px top;		/*背景图片位置  使用混合方式来表示*/

效果如下：

在这里插入图片描述

5.设置背景图片简写属性

background：简写属性它可以同时设置多个样式比如背景颜色，背景图片、背景图片是否平铺，水平位置、垂直位置
background：简写属性其他的个数不定顺序也不定每一个值之前使用空格分隔

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景图片平铺</title>
	<style>
		.box{
			/*给div设置参数*/
			width: 1000px;  
			height: 600px;
			border: 1px solid #f00;
			margin-right: auto;
			margin-left: auto;
			background:#ccc url(图片地址) no-repeat center center;		
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

效果如下：
在这里插入图片描述

杨旭华　

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS背景样式属性

1.背景颜色<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>背景颜色</title> <style> .box{ width: 100px; /*背景宽度*/ height: 100px; /*背景高度*/ bac...
复制链接

扫一扫