1
A
回答
2
您可以使用圆角半径达到这个布局:
如果你想要一个椭圆形,你必须特大型剪裁元素并把它里面抵消图像:
document.getElementById('button1').addEventListener('click', function(){
document.getElementById('profile').classList.toggle('view');
});
.profile{
background: #1111cc;
width:300px;
height:100px;
position:relative;
overflow:hidden;
margin: 20px;
}
.clip{
position:absolute;
background: red;
width: 100px;
height:130px;
top: -15px;
border-top-right-radius: 50px 65px;
border-bottom-right-radius: 50px 65px;
overflow:hidden;
}
.img{
position: absolute;
top: 15px;
background: rgba(100,100,100,0.8);
width:100px;
height:100px;
}
.name{
position: absolute;
bottom: 15px;
margin: 0;
padding: 0 10px 0 0;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
width: 100px;
}
.profile.view .clip{
overflow: initial;
}
.profile.view{
overflow: initial;
}
<div id="profile" class="profile">
<div class="clip">
<img class="img" src="https://i.stack.imgur.com/oiszU.png">
<p class="name">My name is too long for this world..</p>
</div>
</div>
<button id="button1">view all shapes</button>
相关问题
- 1. 在Android浏览器上的SVG渲染
- 2. Android浏览器中的SVG
- 3. 基于svg的Fabric.js多重剪辑
- 4. 火狐SVG:剪辑
- 5. SVG在不同浏览器
- 6. IE浏览器,SVG和XHTML
- 7. 跨浏览器SVG preserveAspectRatio
- 8. paper.js,SVG和Opera浏览器
- 9. 跨浏览器SVG> HTML
- 10. .SVG浏览器支持
- 11. 从浏览器打印SVG
- 12. D3(SVG)浏览器支持
- 13. SVG浏览器问题
- 14. Flash滚动浏览影片剪辑
- 15. SVG动画无法在多个浏览器上工作
- 16. 跨浏览器SVG Textpath(Safari浏览器和Firefox)
- 17. svg clipPath不会剪辑
- 18. svg编辑记事本和流浏览器
- 19. 用于HTML5浏览器的SVG或Canvas?
- 20. SVG/VML浏览器的兼容性表
- 21. Chrome浏览器的模糊SVG图像
- 22. 在iOS浏览器中的SVG
- 23. 在浏览器中播放动态声音剪辑
- 24. 跨浏览器与多浏览器
- 25. 如何在没有svg的情况下为所有浏览器制作兼容的剪辑路径css属性?
- 26. 浏览器上的
- 27. 移动Safari浏览器的SVG太多了吗?
- 28. IE浏览器'use'链接中的SVG上的ClipPath
- 29. 浏览器缩放和.SVG图片
- 30. 互联网浏览器jquery + SVG
您是否尝试过使用画布? https://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image – Bellian
问题是,这是一个配置文件图像,所以它由每个用户更改。我无法在CSS中使用修复图像。 这样很棒的裁剪div元素。 – kdskii
画布可以执行图像处理(请参阅链接)或更精确:https://stackoverflow.com/a/6889378/3588584。客户端然后将裁剪图像并显示它。不需要固定的图像,并得到广泛的支持。 – Bellian