CSS样式之背景参数设置(16_02)

一、设置背景颜色

  • 设置背景颜色可用参数:
  • **可用参数一: background **
  • **可用参数二:background-color **
  • 注意参数一和参数二 :任意选择一个使用即可
  • 例如:
<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>背景颜色设置</title>
  <style type="text/css">
    div {
        height: 600px;
        /* 1.设置背景颜色:background 或者 background-color */
        background:red;
        background-color:yellowgreen
    }
  </style>
</head>
<body>
     <div>背景设置的使用</div>
</body>
</html>

二、设置背景图片

  • 设置背景图片可用参数:
  • 可用参数一: background-image
  • 例如:
<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
  				height: 600px;
  				/* 2.设置图像为背景图像:background-image */
  				background-image: url(./600.jpg);
			}
		</style>
	</head>
	<body>
		<div>设置背景图片</div>
	</body>
</html>

三、设置背景平铺

  • 设置背景平铺参数:
  • **可用参数一:background-repeat **
  • 属性值:
    :::info

  • 1、repeat:导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样

  • 2、repeat-x: 图像只在水平上重复

  • 3、repeat-y :图像在垂直方向上重复

  • 4、no-repeat :不允许图像在任何方向上平铺
    :::

  • 例如:

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
  				height: 600px;
  				background-image: url(./600.jpg);
        
        	/* 3.设置背景平铺:background-repeat*/
          background-repeat:repeat ;
			}
		</style>
	</head>
	<body>
		<div>设置背景平铺</div>
	</body>
</html>

四、设置背景大小

  • 设置背景大小可用参数:
  • 可用参数一: background-size
  • 属性值:
    :::info

  • 1、通过像素指定

  • background-size: 100px 20px

  • 2、通过百分比指定

  • background-size: 10% 20%

  • 3、原始图片大小

  • background-size: auto

  • 4、背景填满容器

  • background-size: cover
    :::

  • 例如:

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
  				height: 600px;
          background-image: url(./600.jpg);
          background-repeat:no-repeat ;
        
        	/* 4.设置背景大小:background-size*/
          background-size: 600px 300px;
			}
		</style>
	
	</head>
	<body>
		<div>设置背景大小</div>
	</body>
</html>

五、设置背景的显示位置

  • 设置背景大小可用参数:
  • 可用参数一: background-position
  • 属性值(垂直方向上下)水平方向(左右)):
    :::info

  • 1、顶部居中

  • background-position: top center

  • 2、垂直水平居中

  • background-position: center center

  • 3、底部居中

  • background-position: botton center

  • 4、顶部左边

  • background-position: top left

  • 5、顶部右边

  • background-position: top right
    :::

  • 例如:

<!-- <!DOCTYPE html -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
  				height: 600px;
  				background-image: url(./600.jpg);
          background-repeat:no-repeat ;
          background-size: 600px 300px;
        
  				/* 5.设置背景的显示位置  background-position:  top center*/
          background-position: center center;
			}
		</style>
	</head>
	<body>
		<div>设置背景的显示位置</div>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值