css 背景渐变(如何通过css实现背景颜色渐变?)

• 攻略

技术css3如何将背景设置为渐变色小编给大家分享一下css3如何将背景设置为渐变色，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

边肖将与您分享css3如何将背景设置为渐变颜色。相信大部分人还不太了解，所以分享这篇文章给大家参考。希望你看完这篇文章会有很多收获。我们一起来看看吧！

设置方法：1。使用“background:linear线性渐变(渐变方向，颜色1，颜色2，);"声明；2.使用“背景：径向渐变(形状大小位置，开始颜色，结束颜色)"；“声明。

本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。

渐变 Gradient

CSS3渐变可以使两种或两种以上指定颜色之间的平滑过渡出现。与渐变图片相比，渐变可以减少下载时间和宽带使用，放大后看起来更好。

线形渐变

颜色值沿着一条隐含的直线逐渐过渡。由线性梯度()生成。

为了创建线性渐变，必须至少定义两个颜色节点。节点是您想要呈现平滑过渡的颜色。同时，还可以设置起点和方向(或角度)。

/*渐变轴为45度，从蓝色到红色*/

线性渐变(45度，蓝色，红色)；

/*从右下角到左上角，从蓝色到红色*/

线性渐变(tolefttop、蓝色、红色)；

/*从底部到顶部，从蓝色到40%高度，绿色渐变以红色开始和结束*/

线性渐变(0度，蓝色，绿色40%，红色)；语法

线性渐变([角度|到侧面或拐角，]？颜色-停止列表)角度：使用角度值指定渐变的方向(或角度)。角度顺时针增加。

css3如何将背景设置为渐变色

边或角：描述渐变线的起点。顶部、底部、左侧和右侧的值将转换为0度、180度、270度和90度的角度。其余值将转换为从顶部中心方向开始的顺时针旋转角度。渐变线的终点与其起点的中心对称。

颜色停止列表：颜色变化列表。支持透明度(rgba(255，0，0，0.1))。

示例：背景色线性渐变--background-image+linear-gradient()

！DOCTYPEhtml

超文本标记语言

头

metachartset=' UTF-8 '

Css背景渐变-线性渐变/标题css

风格。演示{

宽度：500；

高度：300；

margin:50pxauto

}。演示* { 0

宽度width:200px

高度：200 px；

margin:20px

文本对齐：居中；

里

ne-height: 200px;
color: #fff;
font-size: 16px;
float: left;
}
.demo1{
/* 底色 */
background-color: #fd0d0d;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";
/* ie10 */
background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* opera 11.1 */
background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* 标准写法 */
background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

}
.demo2{
/* 底色 */
background-color:#d41a1a;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
/* 标准写法 */
background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">基本线性渐变--自上而下</div>
    <div class="demo2">基本线性渐变--45度角</div>
</div>
</body>
</html>

css3如何将背景设置为渐变色

径向渐变

radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）

语法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)

  • shape：椭圆形（ellipse，默认）或圆形（circle）

  • size：

    • closest-side， 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。

    • closest-corner， 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。

    • farthest-side， 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。

    • farthest-corner， 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

  • position：可以是具体的两个位置偏移值（10% 20%），也可以是关键字（left、right、top、bottom）

示例：背景色径向渐变--background-image+radial-gradient()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--径向渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				background-image: -moz-radial-gradient(#ecff05, red);
				background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
				background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
				background-image: radial-gradient(#ecff05, red);
			}
			.demo2{
				background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
				background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
				background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

css3如何将背景设置为渐变色

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。

重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--重复渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				    background: repeating-linear-gradient(
				    to top left,
				    lightpink,
				    lightpink 5px,
				    white 5px,
				    white 10px
				  );
			}
			.demo2{
				   background: repeating-radial-gradient(
				    powderblue,
				    powderblue 8px,
				    white 8px,
				    white 16px
				  );
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

css3如何将背景设置为渐变色

以上是“css3如何将背景设置为渐变色”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！

内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/152806.html

赞 (0)

相关推荐

  • 按照防火墙对数据的处理方法可将防火墙分为什么

    技术按照防火墙对数据的处理方法可将防火墙分为什么本篇内容主要讲解“按照防火墙对数据的处理方法可将防火墙分为什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“按照防火墙对数据的

    攻略 2021年11月9日

  • java.sql.SQLException异常怎么办

    技术java.sql.SQLException异常怎么办这篇文章将为大家详细讲解有关java.sql.SQLException异常怎么办，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有

    攻略 2021年10月19日

  • css中加号是什么意思

    技术css中加号是什么意思这篇文章主要讲解了“css中加号是什么意思”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css中加号是什么意思”吧！

    攻略 2021年11月17日

  • Ubuntu14.04 Caffe如何安装

    技术Ubuntu14.04 Caffe如何安装这篇文章将为大家详细讲解有关Ubuntu14.04 Caffe如何安装，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Caffe简介Caff

    攻略 2021年11月15日

  • mysql如何修改字段注释

    技术mysql如何修改字段注释这篇文章主要介绍“mysql如何修改字段注释”，在日常操作中，相信很多人在mysql如何修改字段注释问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”mysql如

    攻略 2021年12月1日

  • 如何实现elasticsearch导入mysql数据

    技术如何实现elasticsearch导入mysql数据这篇文章主要讲解了“如何实现elasticsearch导入mysql数据”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学

    攻略 2021年12月4日