Question

我有一个dropzone，用户可以放置图像，它有一些相关的CSS，使得dropzone背景在拖动图像时变灰，给出视觉提示。

HTML

   <div>
        <figure>
            <div id="dropzone">
            </div>
        </figure>
    </div>

CSS

#dropzone {
  border: 3px solid black;
  min-width:300px; 
  min-height:100px;
  max-width:300px; 
  max-height:100px;
}

#dropzone.dragover {
  background: rgba(0, 0, 0, .5);
}

但是我不希望dropzone是空的我希望它有一个起始图像（在这里说＆＃39; Drop Files＆＃39;）

   <div>
        <figure>
            <div id="dropzone">
               <img src="dropzone.jpg"/>
            </div>
        </figure>
    </div>

如果我添加它，那么当拖动图像时dropzone不会变灰，我该如何解决这个问题呢？

Answer 1

您可以在dropzone上使用opacity。

#dropzone.dragover {opacity:0.5}

因为background只是元素的背景颜色。

Answer 2

尝试使用CSS属性background-image

设置背景图片

#dropzone{
  background-image: url(path/to/your/image);
  /* rest of the css goes here*/
}

＆＃13;

#dropzone {
  border: 3px solid black;
  min-width:300px; 
  min-height:100px;
  max-width:300px; 
  max-height:100px;
  background-image:url(https://images.pexels.com/photos/577775/pexels-photo-577775.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

#dropzone.dragover {
  background: rgba(0, 0, 0, .5);
}

＆＃13;

<div>
    <figure>
        <div id="dropzone">
        </div>
    </figure>
</div>

＆＃13;

Answer 3

我有两个解决方案：

首先我将图像显示为background-image，然后在第一个解决方案中将其过滤为灰度（More about filter here），在第二个解决方案中，我只是将背景覆盖为灰色。 / p>

＆＃13;

#dropzone1,
#dropzone2 {
  border: 3px solid black;
  min-width: 300px;
  min-height: 100px;
  max-width: 300px;
  max-height: 100px;
  background-image: url(https://picsum.photos/300/300);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

#dropzone1:hover {
  filter: grayscale(100%);
}

#dropzone2:hover {
  background: rgba(0, 0, 0, .5);
}

＆＃13;

<div>
  <figure>
    <div id="dropzone1">
    </div>
  </figure>
</div>

<div>
  <figure>
    <div id="dropzone2">
    </div>
  </figure>
</div>

＆＃13;

如何在包含图像的情况下更改dragover上的div背景

3 个答案: