图片transform其父级的border-radius失效

最近在做一个项目的时候,遇到这样一个bug! 仔细看图的圆角部分。


不难发现在中间图片放大的过程里,父级div的border-radius出现的短暂的失效。(此bug我在火狐里面没有看到。在chorme浏览器下面。)后来群里的一个网友给了我答案!

加上:transform: rotate(0deg);-webkit-transform:rotate(0deg);

看上去是八竿子打不着的属性,加到代码里面 没想到就生效了!!!


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Szy1000</title>
	<style>
		body{
			background: blue;
		}
		.scale{
			width: 300px;
			height: 200px;
			overflow: hidden;
			border-radius: 10px;
			transform: rotate(0deg);
			-webkit-transform:rotate(0deg);
		}
		.scale img{
			height: 100%;
			transition: 500ms;
		}
		.scale:hover img{
			transform: scale(1.2);
		}
	</style>
</head>
<body>
	<div class="scale">
		<img src="1.jpg" alt="">
	</div>
</body>
</html>

-----------------------------------------------我是不完美的分割线------------------------------------------------------

方法二:mask-image()

首先,我们需要准备一张带有圆角的png图片。注意圆角的角度。我这里是建一个宽300px高 200px 圆角10px。填充部分跟你是黑色还白色这里无需关心。当然在svg遮罩里面的时候就需要注意了。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Szy1000</title>
	<style>
		body{
			background: blue;
		}
		.scale{
			width: 300px;
			height: 200px;
			overflow: hidden;
			border-radius: 10px;
			mask-image: url("mask.png");
			-webkit-mask-image:url("mask.png");
		}
		.scale img{
			height: 100%;
			transition: 500ms;
		}
		.scale:hover img{
			transform: scale(1.2);
		}
	</style>
</head>
<body>
	<div class="scale">
		<img src="1.jpg" alt="">
	</div>
</body>
</html>


第二种方法其实就是遮罩。它在火狐上面的兼容性,还有待考证。只有-webkit-mask-image:url("mask.png") 没有其它的前缀了。关于-mask-image敬请期待下一篇博客。

最后附上源码供大家 下载。

谢谢!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值