CSS3初级学习(二)背景图片叠加

CSS3初级学习(二) 背景图片叠加

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

先看效果图:

完成效果
鼠标放置前(执行hover效果前):
执行hover效果前
鼠标放置前(执行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属性会影响样式的实时更新)。

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

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

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值