css3背景-背景图片-渐变色

背景图片颜色渐变

gdlm778

2969人浏览 · 2022-07-11 21:44:17

gdlm778 · 2022-07-11 21:44:17 发布

背景添加渐变色

1.背景颜色：backgroud-color:
2. 背景图片
- 背景图片居中
3.渐变色
- 1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 2.径向渐变（Radial Gradients）- 由它们的中心定义

1.背景颜色：backgroud-color:

style样式部分

<style>
			.box {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>

即为class类为box的div添加背景颜色red（红色）
在这里插入图片描述

background-color:冒号后的值可以是英文词语，也可以用16进制表示，例：#fff(白色)；或者用rgb（red，green，blue）表示例：rgb(0,0,0)黑色

2. 背景图片

在这里插入图片描述
从右下角可以看到这个图片大小在 285x285像素
在引用图片当做背景时，该对象一定要有宽高，否则无效
用background-image：url（）
引用图片
URL表示引用图片的路径；可以使用绝对路径，也可以使用相对路径。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片</title>
		<style>
			.wrapper {
				width: 400px;
				height: 400px;
				background-image: url(./核桃.png);
			}
		</style>
	</head>
	<body>
		<div class="wrapper"></div>
	</body>
</html>

在这里插入图片描述
会出现上图图片重复的情况，我们不想要它出现这种情况，此时只需添加一个样式：background-repeat：no-repeat;

由于div盒子大小为400px 比图片大同时背景图片默认从左上角开始引入。

背景图片居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片</title>
		<style>
			.wrapper {
				width: 400px;
				height: 400px;
				background-image: url(./核桃.png);
				background-repeat: no-repeat;
				background-color: aqua;
				/* 方法1  纯纯算数  position 后的两个数值 为 left  top  表示离左侧   顶部距离的大小 */
				/* background-position: 57px 57px; */
				/* 方法2 */
				background-position: 50% 50%;
			}
		</style>
	</head>
	<body>
		<div class="wrapper"></div>
	</body>
</html>

在这里插入图片描述

3.渐变色

background-image

1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>

<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
</body>
</html>

渐变，从上到下

background-image: linear-gradient(to right, red , yellow);

渐变，从左到右

background-image: linear-gradient(to bottom right, red , yellow);

渐变，对角
多节点渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 55px;
	background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
</div>
</body>
</html>

在这里插入图片描述

2.径向渐变（Radial Gradients）- 由它们的中心定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div>
</body>
</html>