Question

我正在尝试在secondaryBackground: Container( color: Colors.red, padding: EdgeInsets.only(right: 20.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Icon( Icons.delete, ) ], ), ),上添加一个覆盖图片的覆盖图。我见过在背景图片上添加叠加层的方法，但似乎无法弄清楚为什么它不适用于div？

方法：

div

.featured-image {
  height: 338px;
  position: relative;
  overflow: hidden;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}

Answer 1

<style>
.featured-image {
  height: 338px;
  position: relative;
}

.overlay {
  position:absolute;
  top:0px;
  left:0px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}
</style>
<div class="featured-image">
  <div class="overlay"></div>
    <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  
</div>

将透明叠加层添加到div

1 个答案: