CSS样式之背景参数设置（16_02）

henry_rhy

已于 2023-09-12 10:53:15 修改

阅读量284

点赞数

文章标签： css 前端 javascript

于 2023-09-11 11:04:15 首次发布

本文链接：https://blog.csdn.net/qq_40236497/article/details/132802773

版权

一、设置背景颜色

设置背景颜色可用参数：

**可用参数一： 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>

henry_rhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式之背景参数设置（16_02）

* 1.设置背景颜色:background 或者 background-color */1、repeat：导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。/* 2.设置图像为背景图像:background-image *//* 3.设置背景平铺:background-repeat*//* 4.设置背景大小:background-size*/4、no-repeat ：不允许图像在任何方向上平铺。3、repeat-y ：图像在垂直方向上重复。2、repeat-x：图像只在水平上重复。
复制链接

扫一扫