CSS3初级学习（二）背景图片叠加

CSS3初级学习（二） 背景图片叠加

Hello！大家好久不见，这里是学业日渐繁忙的万物之恋，沉迷学习无心写博客(并不是），久违的来和大家分享下自己在学习过程中碰到的一些有趣案列。话不多说：

先看效果图：

鼠标放置前(执行hover效果前)：

鼠标放置前(执行hover效果后)：

完成的效果有：1.文字颜色变化；
2.在文字后添加了“>>”符号；
3.实现背景图片叠加

上代码：

<button class="btn">
			<span>万物之恋</span>
</button>

上样式：

.btn{
		width: 300px;
		padding: 32px;
		color: black;
		font-size:25px;
		border:2px solid #A52A2A;
		border-radius: 5px;
		background: url(img/1.jpg) no-repeat;
		background-size: 100%;
		cursor: pointer;
		transition: 2s;
		text-align: left;
		}
.btn span{
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 2s;
		}
.btn span:after{
		content: "\00bb";
		position: absolute;
		opacity: 0;
		top: 0;
		right: -20px;
		transition: 2s;
		}

注意点：1.为父级添加浮动“position：relative”，但没有让其实际进行移动是为了让伪类“after”的浮动生效；
2.“\00bb”是生成符号“>>”的关键；
3.在未执行设置伪类“hover”前，实际就已经生成了">>",通过设置不透明度“opcity:0”，让其不提前显示；

关键实现效果部分(定义伪类hover)：

.btn :hover{
			color: rgb(0, 255, 127);
			padding-left: 130px;
			background: url(img/狗.png) no-repeat;
			background-size: 120px 50px;
			transition: 2s;
			}
.btn:hover span:after {
		   color: white;
		   opacity: 1;
		   right: -30px;
			}

实际上还是非常简单的，需要注意的只有文字位置是需要自己实时调整的。因为没有为button按钮设置固定高度，会因为文字的增加而出现样式塌陷。建议自己在使用时，先去除transition属性，再根据文字的多少大小来调整。(因为在使用浏览器实时调整时，transition属性会影响样式的实时更新）。

最需要注意的一个要点：用于叠加的背景图片必须是透明背景
因为背景图片的叠加是真正意义上的叠加，会出现覆盖的情况，因此只有通过使用透明背景的方式，才能够达到自己想要的效果。

文章到这里就结束了，谢谢大家的观看，如果哪里有错误或是不足的地方，欢迎在评论区指出，谢谢大家！