如何设置背景颜色的视图透明在React本地

这是我所使用的视图的样式

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
}

目前它的背景是白色的。我可以改变我想要的backgroundColor，如“#343434”，但它只接受最大6十六进制的颜色，所以我不能给不透明度，如“#00ffffff”。我试着像这样使用不透明度

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  opacity: 0.5,
}

但是它降低了视图内容的可见性。有答案吗?

当前回答

这个可以帮到你，

添加一个View元素，并向该视图添加如下所示的样式

    .opaque{
       position:'absolute',
       backgroundColor: 'black',
       opacity: 0.7,
       zIndex:0
}

其他回答

令人惊讶的是，没有人告诉我们这一点，这让我们更加清楚:

style={{
backgroundColor: 'white',
opacity: 0.7
}}

为backgroundColor使用rgba值。

例如,

backgroundColor: 'rgba(52, 52, 52, 0.8)'

这将它设置为不透明度为80%的灰色，这是由不透明度小数0.8派生出来的。这个值可以是0.0到1.0之间的任何值。

这个可以帮到你，

添加一个View元素，并向该视图添加如下所示的样式

    .opaque{
       position:'absolute',
       backgroundColor: 'black',
       opacity: 0.7,
       zIndex:0
}

以下工作很好:

backgroundColor: 'rgba(52, 52, 52, alpha)'

你也可以试试:

backgroundColor: 'transparent'

试试这个backgroundColor: '#00000000' 它将设置背景颜色为透明，它遵循#rrggbbaa十六进制代码

推荐文章