Question

我正在制作一个应用程序，其页脚与Snapchat非常相似，因为下面的内容中有三个图标是不透明的，但是容器是透明的。效果应类似于此处使用Web CSS的要求：How to make parent transparent but not the child?。我当前的页脚如下：

        <View style={appFooter.container}>
            <Grid>

                <Col size={17} > </Col>

                <Col size={22} style={feedItem.centerItems}>
                    <Profile active={onProfile}/>
                </Col>

                <Col size={22} style={feedItem.centerItems} >
                    <Spice active={onFire} />
                </Col>

                <Col size={22} style={feedItem.centerItems}>
                    <News active={onNews} />
                </Col>

                <Col size={17} > </Col>

            </Grid>
        </View>

css在哪里：

container : {

      position: 'absolute'
    , bottom  : 0
    , left    : 0
    , right   : 0
    , height  : 50

    // , backgroundColor: 'rgba(0,0,0,0.1)'
     // '#00000000'
    , opacity : 0.8


    , flexDirection  : 'column'
    , justifyContent : 'center'
    , alignItems     : 'center'

},

正如您在评论中看到的那样，我已经尝试了解决方法rgba(...)，但是它并没有达到我想要的效果。现在，opacity: 0.8解决方案为我提供了一个页脚容器及其具有0.8不透明度的子级容器。但是理想情况下，仅页脚是透明的。这三个子图标是不透明的。

Answer 1

您无法尝试。当您将组件的不透明度设置为80％时，它的子级和最多子级的不透明度为80％。孩子们的最高分数不能超过80％。

解决方案在于您的评论尝试。人们通常希望背景透明，这就是rgba（）起作用的地方。使用它来设置透明度。

使事物透明的可能解决方案是：

使用opacity，它也会使它的所有子项消失
使用rgba（）并将Alpha设置为所需的不透明度
使用半透明图像作为背景
在要受影响的元素中定位一个绝对div（应该是相对且透明的）。

Answer 2

尝试一下：

backgroundColor: 'transparent'

backgroundColor有一个“透明”枚举。

React-native CSS使父容器透明

2 个答案: