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

图像是否正常工作？尝试将它设置为非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; 
}

答

我认为最简单的解决办法是添加到您的自定义CSS文件，下面的代码

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

这将有助于尤其是当你有悬浮窗的css文件通过cdn链接。

Dropzone.js设置背景图片

相关推荐