...」;2、使用img標籤引入圖片;3、透過給img新增屬性為“.img-box{width: 400px; overflow: hidden;background-color:teal;}”即可。"/> ...」;2、使用img標籤引入圖片;3、透過給img新增屬性為“.img-box{width: 400px; overflow: hidden;background-color:teal;}”即可。">
css溢出圖片隱藏的實作方法:1、建立一個div為「
...」;2、使用img標籤引入圖片;3、透過為img新增屬性為「.img-box{width: 400px; overflow: hidden;background-color:teal;}」即可。
本教學操作環境:Windows10系統、CSS3版、DELL G3電腦
css溢位圖片隱藏怎麼實現?
CSS實作圖片或文字溢出隱藏效果
效果圖:單行溢出隱藏
.nameBox { // 文字不允许换行(单行文本) white-space: nowrap; // 溢出部分隐藏 overflow: hidden; // 文本溢出后,使用 ... 代替 text-overflow: ellipsis; margin-right: 3px; }
圖片內容放大框架不變(溢出隱藏overflow:hidden)
<div> <img alt="css溢出圖片隱藏怎麼實現" > </div> <style> .img-box{ width: 400px; overflow: hidden;/*最主要的是这个 hidden是溢出隐藏,将溢出部分显示出来:overflow:visible*/ background-color:teal; } img{ display: block; width:100%; animation: a1 4s linear infinite alternate; } @keyframes a1{ 100%{ transform: scale(1.5); } } </style>
推薦學習:《css影片教學》
以上是css溢出圖片隱藏怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!