需要 Carousel 和 Modal 中的图像为不透明度 1，而其他一切都是透明的答案

【问题标题】：Need Image in Carousel and Modal to be Opacity 1, while everything else is transparent需要 Carousel 和 Modal 中的图像为不透明度 1，而其他一切都是透明的
【发布时间】：2022-08-04 05:37:09
【问题描述】：

反应 css 样式问题。我有一个 bootstrap 5 模态组件作为父级和一个轮播作为子级。我试图让模态和轮播透明，而轮播中的图像具有完全不透明度 1。我尝试了背景颜色、背景图像，并更改了不透明度个体以获得我想要的结果，但没有成功。我最大的问题是子组件继承了父组件的不透明度，因为它的初始不透明度（100%（不透明度：1））。例如：父元素的不透明度为 50% 子元素的不透明度为 100%。子元素的实际不透明度为 50%（50% 的 100%）。我希望子元素为 100%。谢谢！

下面是我的简化代码：

    <Modal
             show={modal}
             onHide={handleModalClose}
             fullscreen={true}
             id=\"modalReactBootstrap\"
            >
<Modal.Header id=\"modalHeader\" 
closeButton
></Modal.Header>
<Modal.Body id=\"modalBody\">
                <Carousel>
  <Carousel.Item className=\"carousel-item\">
              <img
                className=\"imgCarousel\"
                src={\"https://imagew.com/images/animation_old/anim5.jpg\"}
                alt=\"First slide\"
              />
            </Carousel.Item>
            
                </Carousel>
                </Modal.Body>
            </Modal>

标签： css reactjs modal-dialog carousel opacity

【解决方案1】：

打开这个问题，只是为了分享答案，如果有人搜索相同的东西。 react-bootstrap 的 Modal 类允许我在轮播中的图像具有 100% 的不透明度，而背景的其余部分是部分透明的，它是“modal-content”。我能够在“modal-content”类中有一个工作的背景颜色样式，以使其按需要工作。

【讨论】：