CSS實現照片上傳加號框,是一種讓上傳照片功能更直觀、更好用的方式。下面我們就來看看如何用CSS實現這個效果。
.upload-box { width: 100px; height: 100px; border: 1px dashed #ccc; position: relative; } .upload-box i { display: inline-block; width: 40px; height: 40px; background: url(../img/plus.png) no-repeat center; position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; }
上面是用CSS實現照片上傳加號框的代碼,我們可以看到,首先定義了一個upload-box的class,用于包裹上傳的圖片,并設置它的寬度、高度和邊框樣式。
然后是在這個元素中添加一個i標簽,用于顯示加號圖標。對于這個i標簽,設置了寬度、高度、背景圖片為加號圖標,并通過position屬性實現了位置居中的效果。
現在,我們就可以把這個代碼嵌入到我們的網頁中,給用戶帶來更好用的上傳功能了。