Html Dropzone.js设置背景图片

我对Dropzone.js有问题。我想插入一个背景图像，人们可以在上面拖放自己的图像。有趣的是，我可以将dropzone的背景设置为我想要的任何颜色（我尝试了蓝色），它可以工作，但对图像不起作用

您可以在以下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;
}*/

谢谢你的帮助

保罗明白了！ 该图像不位于相对于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;
}

---

这将特别有助于您通过cdn链接dropzone的css文件。

图像确实有效吗？尝试将其设置为非dropzone div的背景以进行检查。除此之外，请使用开发人员工具查看dropzone元素，是否对其应用了

background image

属性，以及是否有任何内容覆盖了它。谢谢，感谢您的帮助，我找到了错误的地方