Dropzone.js設置背景圖片

我有一個Dropzone.js的問題。我想插入一張背景圖片，其中人們可以拖放他們自己的圖片。有趣的是，我可以將dropzone的背景設置爲我想要的任何顏色（我試過藍色），但它可以工作，但它不適用於圖像...Dropzone.js設置背景圖片

您可以在以下CSS中看到代碼解壓縮：

/* *****CHAMP DROPZONE***** */ 
.dropzone { 
    border: 1px solid #256EB8; 
    /*min-height: 360px;*/ 
    height:70px; 
    width:70px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    /*background: blue;*/ 
    background-image: url("MY_IMAGE.png"); 
    padding: 0px; 
    margin:0px; 
}

有什麼想法出了什麼問題？如果需要的話，這裏是更下面的代碼：

/* The MIT License */ 
.dropzone, 
.dropzone *, 
.dropzone-previews, 
.dropzone-previews * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width:50%; 
} 
.dropzone { 
    position: relative; 
/* border: 1px solid rgba(0,0,0,0.08); 
    background: rgba(0,0,0,0.02); 
    padding: 1em;*/ 
    background-image: url("MY_IMAGE.png"); 
} 

.dropzone .dz-message { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
} 
.dropzone.dz-drag-hover { 
    border-color: rgba(0,0,0,0.15); 
    background: rgba(0,0,0,0.04); 
} 


/* *****CHAMP CADRE BLANC***** */ 
.dropzone .dz-preview, 
.dropzone-previews .dz-preview { 
    background: rgba(255,255,255,0.8); 
    position: relative; 
    display: inline-block; 
    margin: 0px; 
    vertical-align: top; 
    border: none; 
    padding: 0px 0px 0px 0px; 
    background-image: url("MY_IMAGE.png"); 
} 
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail], 
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] { 
    display: none; 
} 

/* *****CHAMP CADRE BLANC***** */ 
.dropzone .dz-preview .dz-details, 
.dropzone-previews .dz-preview .dz-details { 
    width: 70px; /*******/ 
    height: 70px; /*******/ 
    position: relative; 
    background-image: url("MY_IMAGE.png"); 
    /*background: #ebebeb;********************************/ 
    padding: 0px; 
    margin-bottom: 0px; 
} 
.dropzone .dz-preview .dz-details .dz-filename, 
.dropzone-previews .dz-preview .dz-details .dz-filename { 
    overflow: hidden; 
    height: 100%; 
} 

/* *****CHAMP IMAGE UPLOADEE***** */ 
.dropzone .dz-preview .dz-details img, 
.dropzone-previews .dz-preview .dz-details img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 70px; /*******/ 
    height: 70px; /*******/ 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

/* *****CHAMP DROPZONE***** */ 
.dropzone { 
    border: 1px solid #256EB8; 
    /*min-height: 360px;*/ 
    height:70px; 
    width:70px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    /*background: blue;*/ 
    background-image: url("MY_IMAGE.png"); 
    padding: 0px; 
    margin:0px; 
} 

/* *****CHAMP DROPZONE MESSAGE ACCUEIL***** */ 
.dropzone .dz-default.dz-message { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -o-transition: opacity 0.3s ease-in-out; 
    -ms-transition: opacity 0.3s ease-in-out; 
    transition: opacity 0.3s ease-in-out; 
    /*background-image: url("../images/spritemap.png");*/ 
    /*background-image: none;*/ 
    background-image: url("MY_IMAGE.png"); 

    /*background-repeat: no-repeat; 
    background-position: 0 0;*/ 
    position: absolute; 
    width: 70px; /*******/ 
    height: 70px; /*******/ 
    /*margin-left: -214px; 
    margin-top: -61.5px; 
    top: 50%; 
    left: 50%;*/ 
} 
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) { 
    .dropzone .dz-default.dz-message { 

    background-image: url("MY_IMAGE.png"); 
    -webkit-background-size: 428px 406px; 
    -moz-background-size: 428px 406px; 
    background-size: 428px 406px; 
    } 
} 
.dropzone .dz-default.dz-message span { 
    display: none; 
} 
/* 
.dropzone.dz-square .dz-default.dz-message { 
    background-position: 0 -123px; 
    width: 268px; 
    margin-left: -134px; 
    height: 174px; 
    margin-top: -87px; 
} 
.dropzone.dz-drag-hover .dz-message { 
    opacity: 0.15; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; 
    filter: alpha(opacity=15); 
} 
.dropzone.dz-started .dz-message { 
    display: block; 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
}*/ 

/*.dropzone .dz-preview, 
.dropzone-previews .dz-preview { 
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16); 
    box-shadow: 1px 1px 4px rgba(0,0,0,0.16); 
    font-size: 14px; 
}*/

謝謝您的幫助！

Paul

來源

2014-09-10 Paul

圖像是否正常工作？嘗試將它設置爲非dropzone div的背景來檢查。除此之外，使用開發人員工具查看dropzone元素，是否應用了'background-image'屬性，以及是否有任何東西正在覆蓋它。 – 2014-09-10 10:18:46

謝謝，我發現我錯了，謝謝你的幫助 – Paul 2014-09-10 13:13:41

GOT IT！圖像不在相對於CSS文件的文件夾中。我改變的背景圖像的URL方式如下：

/* *****CHAMP DROPZONE***** */ 
.dropzone { 
    border: 1px solid #256EB8; 
    /*min-height: 360px;*/ 
    height:70px; 
    width:70px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    /*background: blue;*/ 
    background-image: url("../images/MY_IMAGE.png"); 
    padding: 0px; 
    margin:0px; 
}

來源

2014-09-10 13:13:14 Paul

我認爲最簡單的解決辦法是添加到您的自定義CSS文件，下面的代碼

.dropzone .dz-preview.dz-image-preview { 
    background-color: transparent !important; 
}

這將有助於尤其是當你有懸浮窗的css文件通過cdn鏈接。

來源

2017-07-26 08:40:46 vohratom

Dropzone.js設置背景圖片

回答

相關問題