Question

我有两个分层的DIV;一个在前面（z-index：1），一个在后面（z-index：-1）。我希望前面的DIV有一个背景颜色：透明＆＃39;和DIV背面有一个＆＃39;背景颜色：灰色＆＃39;。

问题是透明颜色只显示灰色（我想这是预期的），所以两个DIV都显示为一种颜色。有没有办法让内部DIV具有透明色，然后在它周围有一个更大的DIV，在不重叠的地方有不同的背景颜色？

Answer 1

也许你想要这样的东西：

NODE_ENV=production

body {
 background:url(https://lorempixel.com/g/1000/800/) center/cover;
}

.container {
  margin:50px;
  padding:20px;
  --c:linear-gradient(red,red);
  background-image:var(--c),var(--c),var(--c),var(--c);
  background-size:30px 100%,100% 30px;
  background-position:left, top,right,bottom;
  background-repeat:no-repeat;
  position:relative;
  color:#fff;
}
.overlay {
  position:absolute;
  content:"";
  top:30px;
  left:30px;
  right:30px;
  bottom:30px;
  background:rgba(0,255,0,0.5);
}

另一个背景前的透明背景

1 个答案: