02_CSS样式之背景参数设置

一、设置背景颜色

设置背景颜色可用参数：
- **可用参数一： 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二、设置背景图片

把图像设置为背景：
- 可用参数一： background-image
- 属性的默认值是 none,表示背景上没有放置任何图像
- 如果需要设置一个背景图像,必须为这个属性设置一个 URL 值

例如：


<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三、设置背景平铺

需要在页面上对背景图像进行平铺：
- **可用参数一：background-repeat **
属性值：
- 1、repeat：导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样
- 2、repeat-x：图像只在水平上重复
- 3、repeat-y ：图像在垂直方向上重复
- 4、no-repeat ：不允许图像在任何方向上平铺

例如：


<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

四、设置背景大小

设置背景大小可用参数：
- 可用参数一： background-size
属性值：
- 通过像素指定
  | background-size: 100px 20px |
- 通过百分比指定
  | background-size: 10% 20% |
- 原始图片大小
  | background-size: auto |
- 背景填满容器
  | background-size: cover |

例如：


<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 20px;   通过像素指定
    			background-size: 10%  20%;   通过百分比指定
    			background-size: auto;  原始图片大小
    			background-size: cover;   背景填满容器
			}
		style>
	head>
	<body>
		<div>设置背景大小div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

五、设置背景的显示位置

设置背景的显示位置
- 可用参数一： background-position
属性值（垂直方向上下）水平方向（左右））：
- 顶部居中
  | top center |
- 垂直水平居中
  | center center |
- 底部居中
  | botton center |
- 顶部左边
  | top left |
- 顶部右边
  | top right |

例如：


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			div {
				height: 600px;
				background-image: url(./day_16_前端css学习_20220709/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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

六、如何设置背景渐变色

设置背景渐变色
- 可用参数一：linear-gradient(颜色1,颜色2)

例如：


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			div {
  				height: 600px;
  				background-image: url(./600.jpg);
          background: linear-gradient(#00aa7f, #b0ffbd)
			}
		style>
	head>
	<body>
		<div>设置背景的显示位置div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关阅读:
双向电平电压转换器TXS0102DCTR应用电路设计
循环结构——while循环、do...while循环
解决Springboot使用Junit测试时对数据库的修改无效
[区间dp]Link with Bracket Sequence II 2022杭电多校第4场 1001
pytorch_lightning模型训练加速技巧与涨点技巧
腾然教育MCN覃小龙公子：覃宣量2022年2岁10个月亲子照
基于51单片机DS18B20温度测量仿真设计（源码+仿真+报告+讲解）
10 分钟了解 Pulsar：针对 Kafka 用户的指南
简单记录 Binder几个面试问题
安卓开发面试题

原文地址：https://blog.csdn.net/qq_40236497/article/details/132826066