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. 基於svg的Fabric.js多重剪輯
- 2. 火狐SVG:剪輯
- 3. 跨瀏覽器SVG preserveAspectRatio
- 4. 跨瀏覽器SVG> HTML
- 5. 從瀏覽器打印SVG
- 6. SVG瀏覽器問題
- 7. svg clipPath不會剪輯
- 8. 用於HTML5瀏覽器的SVG或Canvas?
- 9. SVG/VML瀏覽器的兼容性表
- 10. 在瀏覽器中播放動態聲音剪輯
- 11. 移動Safari瀏覽器的SVG太多了嗎?
- 12. IE瀏覽器'use'鏈接中的SVG上的ClipPath
- 13. SVG DOM vs CSS在瀏覽器中
- 14. 瀏覽器縮放和.SVG圖片
- 15. Svg元素和瀏覽器兼容
- 16. 瀏覽器 - SVG渲染完成事件
- 17. SVG動畫而非瀏覽器
- 18. svg動畫瀏覽器支持
- 19. 刪除.svg圖片上的瀏覽器反鋸齒
- 20. SVG和網絡瀏覽器上的音頻
- 21. 瀏覽器上的圖像和文本剪輯工具如何工作? (Evernote,剪貼板,snip.it等)
- 22. 多種瀏覽器
- 23. 在谷歌Chrome瀏覽器上畫布錯誤的裁剪
- 24. SVG linearGradient不顯示路徑(多瀏覽器)
- 25. 如何刪除編輯器上方的eclipse項目瀏覽器?
- 26. 集成在瀏覽器上的emacs編輯器
- 27. SVG foreignObject不顯示在任何瀏覽器上,爲什麼?
- 28. 一些SVG文件在Safari瀏覽器上不起作用
- 29. SVG <rect>填寫在Chrome瀏覽器不工作Safari瀏覽器
- 30. Eclipse插件。瀏覽器編輯器
您是否嘗試過使用畫布? https://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image – Bellian
問題是,這是一個配置文件圖像,所以它由每個用戶更改。我無法在CSS中使用修復圖像。 這樣很棒的裁剪div元素。 – kdskii
畫布可以執行圖像處理(請參閱鏈接)或更精確:https://stackoverflow.com/a/6889378/3588584。客戶端然後將裁剪圖像並顯示它。不需要固定的圖像,並得到廣泛的支持。 – Bellian