CSS オーバーフロー画像の非表示を実装する方法: 1. div を "
..."; として作成します 2. img タグを使用して、画像を紹介 ; 3. imgに属性「.img-box{width: 400px; overflow: hidden; background-color:teal;}」を追加するだけです。
このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター
CSS オーバーフロー画像を非表示にする方法?
#画像またはテキストのオーバーフロー非表示効果を実現する CSS
オーバーフローの非表示テキスト オーバーフロー操作効果画像:単一行 オーバーフローの非表示.nameBox { // 文字不允许换行(单行文本) white-space: nowrap; // 溢出部分隐藏 overflow: hidden; // 文本溢出后,使用 ... 代替 text-overflow: ellipsis; margin-right: 3px; }
#
<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オーバーフロー画像を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。