Question

我的代码中有一个div，并且动态地在该DIV中插入了一些控件。然后我试图在上面插入一个图像。（整个div应该被覆盖，包括该div中的控件）。

但是当我尝试这样做时，我只能覆盖div而无法覆盖该div中的控件。

我使用的代码是：

$('#myDIv').css('background-image', 'url("/Assets/Images/transparent-cover.png")');

所以我的问题是我应该怎样做才能涵盖整个div，包括jquery中的控件。

Answer 1

Plz试试这个：

 $('#myDIv').css({'background-image':"url('/Assets/Images/transparent-cover.png')", 'background-size':"cover"});

Demo

DEMO 1

Answer 2

由于您想要覆盖div中的元素，因此需要添加另一个能够执行此操作的元素。您可以使用：after-definition创建一个CSS类，它涵盖了您的div。像这样：

$('.block').hover(function(){
  $(this).toggleClass('cover');
});

.block {
  width: 150px;
  height: 150px;
  margin: 5px;
  background-color: cyan;
  position: relative;
}

.control {
  width: 20px;
  height: 20px;
  margin: 10px;
  float: left;
  background-color: red;
}

.cover:after {
  content: "";
  background-color: blue;
  position: absolute;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="control"></div>
  <div class="control"></div>
  <div class="control"></div>
</div>

Answer 3

使用background-size:cover覆盖带背景图片的div ..

用图像覆盖DIV

3 个答案: