在 HTML 中上傳預覽文件是一項基本功能。但是,如何讓這個功能看起來更好呢?這時就需要用到 CSS 了。
/* CSS 代碼 */ .file-upload { position: relative; overflow: hidden; display: inline-block; background: #0077cc; color: #fff; padding: 10px 20px; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 5px; } .file-upload input[type="file"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; cursor: pointer; } .file-preview { width: 200px; height: 200px; border: 1px solid #eee; border-radius: 5px; overflow: hidden; margin-top: 10px; } .file-preview img { width: 100%; height: 100%; object-fit: cover; }
上面是一個簡單的 CSS 代碼示例。可以看到,我們為上傳按鈕增加了樣式,讓它看起來更加美觀。同時為上傳的預覽圖片增加了樣式,讓它具有一定的展示效果。
當然,這只是一個簡單的示例,如果要實現更復雜的效果,就需要更多的 CSS 元素和樣式了。但是,總的來說,使用 CSS 可以讓上傳預覽文件更具有實用性和美觀性。
上一篇html5和css書
下一篇css里的居中