博客

background-image

它允许为背景添加一个图片或者一个渐变颜色 这里注意渐变色属于image 而不是color


下面我们写一个渐变色的div看看实际用法

.main{
	width: 200px;
	height: 200px;
	border: 1px solid #333;
	border-radius: 50%;
	background-image: linear-gradient(141deg,#9fb8ad 0%,#1fc8db 51%,#2cb5e8 75%);
	opacity: .8;
}

关于image的用法很简单 主要讲解一下渐变中的参数 第一个为角度 （

与我们数学中的X Y 轴方向相同 0度则为Y轴正方向所以渐变是从下往上 它等同于 to top ， 我们这里的141度 大概相当于向右下方向

）

第二个参数为开始颜色1 与之对应第三个参数表示颜色1所占比例 越大则铺的越多

后面的参数也是一样色号对应占比

然后我们说一下background-clip

它表示指定背景绘制区域 一般的属性值为

• border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
• padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
• content-box 背景绘制在内容方框内（剪切成内容方框）。

但是这里我们说一个不常用的属性 因为兼容性较差而且也可以通过其他方式设置


-webkit-background-clip: text

以文本来绘制

.text{
	width: 320px;
	margin-left:90px ;
	line-height: 80px;
	font-size: 80px;
	font-weight: bold;
	/**这里我们的背景图片是一张火焰 宽高都为500 ， 所以下面的一些值都是根据这个来设置的**/
	background-image: url('f.jpg');
	-webkit-background-clip: text;
	/**设置文字填充为透明才能搭配我们的clip**/
	-webkit-text-fill-color: transparent;
	background-position:-77px 0 ;
	/**这个动画效果就是移动我们的图片**/
	transition: background-position .8s ease;
}
.text:hover{
	background-position: -77px -275px;
}
#out{
	background-color: #333;
	margin-top: 100px;
	margin-left: 100px;
	width: 500px;
	height: 80px;
}

一些解释我写在代码中了下面看一下效果

最后说一个需要注意的地方吧

我们在使用background的时候通常会觉得属性太多一个个设置很麻烦 那我们在连写background时候要注意

比如：

background:url(...) no-repeat fixed center/cover


又或者

background: #333 0 0 / 100px 100px



其他属性的缺失或者顺序都不重要 但是在 position 和 size 之间无论是什么写法都需要以一个 “/” 来分割否则无法识别

如有错误，请指正