CSS：點擊圖片區域上傳文件

本文轉載自查看原文 2015-11-09 14:03 4599

前端菜鳥，本人目前只能看懂和抄代碼。因為參與一個項目需要用到這塊樣式，於是在網上找到的例子。於是記下來，同時也是方便自己查閱。

/*定義圖像以及大小*/
.imageFileInput{
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: red; /*這里可以換成圖片路徑（background-image：../img/....）注意圖片路徑*/
}

/*定義上傳*/
.fileInput{
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}

下面是HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS樣式:點擊圖片上傳文件</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="imageFileInput">
    <input class="fileInput" type="file" id="" name="">
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 點擊圖片進行文件上傳並預覽 [CSS揭秘]擴大可點擊區域 css增加點擊區域寬度實現點擊圖片不同區域響應不同的事件在圖片上點擊一個區域觸發這個區域的事件多圖片上傳(文件上傳) css筆記：CSS顯示圖片中間區域 CSS 擴大可點擊區域的 2 種方法 a標簽絕對定位，點擊區域被圖片遮擋（IE下） Android ImageView圖片透明區域不響應點擊事件，不規則圖片透明區域響應點擊事件