如何使背景图片上方的链接可点击？

Question

如果之前有人问过这个问题，请原谅我，我已经尝试了一些建议的解决方案，但目前还没有一个对我有用。

我有一个背景图片，我想在一个 div 中添加链接，这些链接目前无法点击，我不知道我哪里出错了。

到目前为止，这是我的代码：

import '../../stylesheets/new_style.scss';

import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';


const NewGreeting = props => {
  
      return (
      <div className="full-page">
        <Modal.Dialog>
          <Modal.Body>
           <p> Modal Content Here </p>
          </Modal.Body>
        </Modal.Dialog>

       <div className='trial text-center'>
        <a href="https://google.com">test</a>
       </div>
      </div>
      );
};

export default NewGreeting;

这是我的 css 代码：

.full-page {
  background-image: url("./hello.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }

.trial{
  display: block;
  color: #474747;
  font-size: 2.1em;
  margin-top: 50vh;
}

Answer 1

尝试这个：

.trial{
  display: block;
  color: #474747;
  font-size: 2.1em;
  margin-top: 50vh;
  z-index: 999;
}

z-index 会帮助你。

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

（将我的评论转换为答案：）

问题是<Modal.Dialog>元素具有特殊的行为，使其“接管”页面并使页面的 rest 成为非交互页面 - 并且您的带有链接的<div>位于<Modal>对话框之外，所以只需将您的链接移动到<Modal.Body>中，它们就会再次变得交互。

像这样：

import '../../stylesheets/new_style.scss';

import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';


const NewGreeting = props => {
  
      return (
      <div className="full-page">
        <Modal.Dialog>
          <Modal.Body>
           <p> Modal Content Here </p>

           <div className='trial text-center'>
             <a href="https://google.com">test</a>
           </div>

          </Modal.Body>
        </Modal.Dialog>
      </div>
      );
};

export default NewGreeting;