首页 > 代码库 > 13.resize妙用(书上看到的)
13.resize妙用(书上看到的)
上效果图
准备一张类似比例的图
DOM
<div class="shape-9 box"> <div> <img src="img/bg-2.jpg" alt="before"/> </div> <img src="img/bg-2.jpg" alt="after"/> </div>
css
.box{
height: 300px;
width: 534px;
margin: 20px auto;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
overflow: hidden;
}
.shape-9{ position: relative; } .shape-9>div{ position: absolute; top: 0;left: 0;bottom: 0; width: 10%; max-width: 100%; overflow: hidden; resize: horizontal; } .shape-9>div>img{ filter: blur(4px); } .shape-9>div::before{ content: ‘‘; position: absolute; bottom: 0;right: 0; width: 12px;height: 12px; padding: 5px; background: linear-gradient(-45deg,white 50%,transparent 0); background-clip: content-box; cursor: ew-resize; z-index: 1; } .shape-9 img{ display: block; user-select:none; }
13.resize妙用(书上看到的)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。