Question

我想在图像上应用背景颜色以在其上添加阴影。

现在没有什么特别之处，我只是将background-color:rgba(23,23,23,0.88);放在我的CSS中。

但是在这张图片上，我需要另外一个div，他会在没有阴影的情况下显示真实图像，而且我不知道如何做到这一点。

我做了一个小提琴，因为它一定不是很清楚：https://jsfiddle.net/Haplo31/aguxfr67/

在这个小提琴中，我需要有蓝色的内容＆＃34;内容＆＃34;显示下面图像的一部分而没有bgContainer的背景颜色，就像图像上的窗口一样。（我根本不需要蓝色，只是为了突出显示示例的div）

这可能吗？

非常感谢您的时间和帮助

Answer 1

您可以使用box-shadow属性，在这种情况下非常方便。我修改了您的bg-container类并添加了:before选择器以应用阴影。

可以通过content css属性插入文本，也可以创建另一个div类，应用相同的定位属性并为其添加文本。

.imgContainer {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoR1aeLhVEeg-rfmWln8uuNI7t0El3zNY8HHfKT1Qwd2oN8-GPQQ');
  background-size: cover;
  width: 300px;
  height: 200px;
}

.bgContainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bgContainer:before {
  content: 'This is some sample text to demonstrate you can get content as well';
  color: white;
  padding: 5px;
  width: 50%;
  height: 50%;

  position: absolute;
  bottom: 25%;
  right: 25%;

  box-shadow: 0 0 0 300px black;
  opacity: 0.88;
}

.content {
  width: 100px;
  height: 100px;
  top: 100px;
  background-color: blue;
}

<div class="imgContainer">
  <div class="bgContainer">
    <!--<div class="content">
    </div>-->
  </div>
</div>

CSS，更改背景颜色以补偿容器背景颜色

1 个答案: