如何使背景圖片上方的鏈接可點擊？

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;