Dropzone.js 设置背景图片答案

【问题标题】：Dropzone.js setting background picDropzone.js 设置背景图片
【发布时间】：2014-09-10 10:15:36
【问题描述】：

我对 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;
}*/

感谢您的帮助！

保罗

【问题讨论】：

图片确实有效吗？尝试将其设置为非 dropzone div 的背景以进行检查。除此之外，请使用您的开发人员工具查看 dropzone 元素，是否将 background-image 属性应用于它，以及是否有任何东西覆盖它。
谢谢，感谢您的帮助，我找到了错误的地方

标签： html css background-image dropzone.js

【解决方案1】：

我认为最简单的解决方案是在您的自定义 css 文件中添加以下代码

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

这将很有帮助，尤其是当您通过 cdn 链接 dropzone 的 css 文件时。

【讨论】：

【解决方案2】：

知道了！该图像未位于相对于 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("../images/MY_IMAGE.png");
  padding: 0px;
  margin:0px;
}

【讨论】：