使用CSS在modal后面创建背景/覆盖

我有一个使用css在React中创建的模式，ReactTransionGroupCSS，只有在模式显示时才需要在模式屏幕后面添加背景色。我怎样才能只用CSS来实现这一点？我只需要定位覆盖（只需要白色在0.5不透明度）后面的模式屏幕

.modal-footer-small
  width: 450px
  height: auto
  margin: 0 auto
  top: 53%
  left: 0
  right: 0
  position: fixed
  z-index: 1
  box-shadow: -3px 0 5px rgba(100,100,100,0.2), 3px 0 5px rgba(100,100,100,0.2)
  background: white
  padding: 10px 40px
  > .ui-modal-body
    font-family: 'Flexo'
    font-size: 12px
    margin: 0 auto
    height: auto
    min-height: 160px
    max-height: 250px
    overflow: scroll


.modal-anim-enter
  opacity: 0.00
  transform: translateY(100%)
  &.modal-anim-enter-active
    opacity: 1
    transform: scale(1)
    transition: all .5s

.modal-anim-leave
  opacity: 1
  transform: translateY(100%)
  transition: all .5s
  &.modal-anim-leave-active
    opacity: 0.00
    transform: translateY(100%)

以下是模态组件：

const UiModal = React.createClass({
    getInitialState(){
      return { isOpen: false };
    },

    openModal() {
        this.setState({ isOpen: true });
    },

    closeModal() {
        this.setState({ isOpen: false });
    },


    render() {
        const { openBtnText, header, subHeader, body, footer, footerText, actionBtnText='See More', closeBtnText='Cancel', placement='central', handleSaveAction } = this.props;

        return (
          <div>
            <div className="button" onClick={this.openModal}>{ this.props.openBtnText }</div>
            <div>
            <ReactCSSTransitionGroup transitionName="modal-anim" transitionLeaveTimeout={500} transitionEnterTimeout={500} transitionAppear={true}
            transitionAppearTimeout={500}>
            { this.state.isOpen && 
            <div className={`ui-modal-${placement}`} key={placement}>
              <div className="ui-modal-header">
                                    />
                </div>
                <div className="ui-modal-body">
                  {body}
                </div>
              <div className="ui-modal-footer">
                <div className="ui-modal-footer-button-group">
                  <div className="ui-modal-footer-button-close" onClick={this.closeModal}>{closeBtnText}</div>
                  <div className="ui-modal-footer-button button" onClick={this.handleSave}>{actionBtnText}</div>
                </div>
                <div className="ui-modal-footer-text">{footerText}</div>
              </div>
            </div>
            }
            </ReactCSSTransitionGroup>
          </div>
          </div>
        );
    }
});

export default UiModal;

const UiModal=React.createClass({
getInitialState（）{
返回{isOpen:false}；
},
openModal（）{
this.setState（{isOpen:true}）；
},
closeModal（）{
this.setState（{isOpen:false}）；
},
render（）{
const{openBtnText，header，subHeader，body，footer，footerText，actionBtnText='See More'，closeBtnText='Cancel'，placement='central'，handleSaveAction}=this.props；
返回(
{this.props.openBtnText}
{this.state.isOpen&&
/>
{body}
{closeBtnText}
{actionBtnText}
{footerText}
}
);
}
});
导出默认UiModal；

如果不重新构造HTML，我会使用

.modal footer small

作为覆盖层，并将

.ui modal body

放置在其中

.ui模态体{
字体系列：“柔性版”；
字体大小：12px；
保证金：0自动；
高度：自动；
最小高度：160px；
最大高度：250px；
宽度：450px；
高度：自动；
保证金：0自动；
最高：53%；
左：0；
右：0；
位置：固定；
z指数：1；
盒影：-3px05pxRGBA（1001001000.2），3px05pxRGBA（100100100.2）；
背景：白色；
填充：10px 40px；
}
.模态页脚小{
背景：rgba（255,255,255,0.5）；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
}
身体{
背景：url（“http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg");
}

情态动词

如果不重新构造HTML，我会使用

.modal footer small

作为覆盖层，并将

.ui modal body

放置在其中

.ui模态体{
字体系列：“柔性版”；
字体大小：12px；
保证金：0自动；
高度：自动；
最小高度：160px；
最大高度：250px；
宽度：450px；
高度：自动；
保证金：0自动；
最高：53%；
左：0；
右：0；
位置：固定；
z指数：1；
盒影：-3px05pxRGBA（1001001000.2），3px05pxRGBA（100100100.2）；
背景：白色；
填充：10px 40px；
}
.模态页脚小{
背景：rgba（255,255,255,0.5）；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
}
身体{
背景：url（“http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg");
}

情态动词