Div图像应该是透明的

Question

我有一个问题：

在图像上（带花）我有这个CSS代码：

background:rgba(0, 0, 0, 0.4);

我希望在方形div中放置透明，这样就没有rgba不透明度（成为div中花朵的一部分而不会变暗）。 我该怎么做？ 谢谢你的每一个答案。

Answer 1

您可以使用:after伪元素创建叠加层并使用box-shadow。

div {
  background: url('http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg');
  background-size: cover;
  width: 400px;
  height: 250px;
  position: relative;
  overflow: hidden;
}
div:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  bottom: 50px;
  right: 50px;
  box-shadow: 0px 0px 0px 500px rgba(0, 0, 0, 0.4);
}

<div></div>

您也可以使用svg

div {
  background: url('http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg');
  background-size: cover;
  width: 400px;
  height: 250px;
  position: relative;
  overflow: hidden;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.overlay {
  opacity: 0.4;
}

<div>
  <svg viewBox="0 0 400 250">
    <path class="overlay" d="M347.065,200.282H247.71V93.428h99.355V200.282z M400,0H0v250h400V0z" />
  </svg>
</div>

Answer 2

请试试这个：

div {
    background-color:transparent;
border:4px solid black
}