background-image的特殊用法

@[TOC]background-image用法及介绍

background-image简介

简介：background-image主要用于设置背景图，属性的级别比background-color要高，但是作为背景图层使用时可以与background-color共同使用相互辅佐，除了设置背景图外，background-image还可以作渐变色图层来用

background-image作背景图使用时

代码段

<style>
	.box{
		width:400px;
		height:300px;
		background-image:url(图片存放路径);
	}
</style>
<div class="box"></div>

background-image作渐变色使用时

颜色的渐变不仅仅是用颜色单词去描述，也可以用其他表示颜色的值去渐变

简单的两个颜色渐变

<style>
	.box{
		width:300px;
		height:150px;
		background-image:linear-gradient(to right,red,yellow)
		/* background-image:linear-gradient(to right,#f00,#ff0) */
		/* background-image:linear-gradient(to right,hsl(0deg,100%,50%),hsl(60deg,100%,50%)) */
		/* background-image:linear-gradient(to right,rgb(255,0,0),rgb(255,255,0) */
		/* 向右变化，由红到黄 */
	}
</style>
<div class="box"></div>

效果展示

简单的多个颜色渐变

<style>
	.box{
		width:300px;
		height:150px;
		background-image:linear-gradient(to right,#ff3040,#ff6e63,#fff)
		/* 向右变化，由骚红到浅红再到白的渐变 */
	}
</style>
<div class="box"></div>

效果展示

简单的颜色明显分区表示

<style>
	.box{
		width:300px;
		height:50px;
		background-image:linear-gradient(45deg,
					red 0%,red 25%,
					yellowgreen 25%,yellowgreen 50%,
					red 50%,red 75%,
					yellowgreen 75%,yellowgreen 100%)
		/*以45度角度方向变化颜色，在0%～25%之间为红色，在25%～50%之间为绿色，在50%～75%之间为红色，在75%～100%之间为绿色*/
	}
</style>
<div class="box"></div>

效果展示

简单的多种颜色明显分区表示

<style>
	.box{
		width:300px;
		height:50px;
		background-image:linear-gradient(45deg,
                    #cc2de8 0%, #cc2de8 25%,
                    blueviolet 25%, blueviolet 50%,
                    hotpink 50%, hotpink 75%,
                    #ff5e00 75%, #ff5e00 100%)
		/*以45度角度方向变化颜色，在0%～25%之间为紫色，在25%～50%之间为紫罗兰色，在50%～75%之间为火粉色，在75%～100%之间为橙色*/
	}
</style>
<div class="box"></div>

效果展示

简单的两种颜色以中心扩散渐变无方向可选

<style>
	.box{
		width:100px;
		height:100px;
		background-image:radial-gradient(orange,red)
		/*以中心为橙色向外渐变为红色*/
	}
</style>
<div class="box"></div>

效果展示

简单的多种颜色以中心扩散渐变无方向可选

<style>
	.box{
		width:100px;
		height:100px;
		background-image:radial-gradient(orange,hotpink,#03a9f4)
		/*以中心为橙色中间火粉色向外渐变为天蓝色*/
	}
</style>
<div class="box"></div>

效果展示

绚丽的彩色以中心扩散渐变无方向可选

<style>
	.box{
		width:100px;
		height:100px;
		background-image:radial-gradient(#da8989 0%, #b73eb9 25%,
                    #9456b3 25%, #de09b0 50%,
                    #d4257d 50%, hotpink 75%,
                    #ea5adf 75%, #c3135c 100%);
            border-radius: 50%;
		/*各个分段以不同的颜色区间进行无层次的渐变，总体方向指向外面*/
	}
</style>
<div class="box"></div>

效果展示

感谢您的收看，若对本文有更多想法可在下方留言