html - 如何在 Bootstrap 中将边框覆盖在封面图像上？

Question

我无法在我的网页上的封面图片顶部呈现边框区域。边框区域的内容显示在图像上方，但边框和背景不显示。

边框应该是这样的:

我希望封面照片也能有同样的体验，它覆盖了照片的一半，但也有纯色背景。

下面是一些相关的代码。如果有人可以就如何正确地将这些层叠在一起提供一些指导，那就太好了。

公司简介.js:

class CompanyProfile extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <CoverPhoto/>
        <div className="container-fluid page">
          <ProfileHeader/>

ProfileHeader.js:

const ProfileHeader = (props) => {
  return (
    <div className="row border rounded-top p-2 bg-white" style={{marginTop: '5px'}}>
      <div className="col-lg-2">
        <img className="rounded-circle text-center" id="companyProfile" src={github}/>
        <h5 className="mt-2" id="nameLabel">Github</h5>
      </div>   
      <div className="col-lg-2">
        <h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Website</strong></h6>
        <a className="" href="http://github.com" target="_blank">http://github.com</a>
        <h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Company Size</strong></h6>
        <span className="">800 employees</span>
        <h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Year Founded</strong></h6>
        <span className="">2008</span>
      </div>
      <div className="col-lg-8">
        <h6 className="ml-3 mt-2" style={{marginBottom: '0px'}}><strong>About</strong></h6>
        <p className="ml-3" style={{wordWrap: 'break-word'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim dolor, bibendum non eros ut, aliquet tristique eros. Suspendisse potenti. Cras lobortis condimentum magna, ut vehicula turpis dapibus sit amet. Pellentesque hendrerit ultricies massa, a mattis purus rhoncus mollis. Mauris egestas leo id mauris euismod maximus. Proin feugiat tincidunt laoreet.</p>
      </div>
    </div>   
  )
}

CoverPhoto.js:

import React from 'react';
import coverPhoto from './images/coverphoto.jpg';

const CoverPhoto = () => {
  return <img src={coverPhoto}  style={{width: '100%', maxHeight: '400px'}}/>
}

export default CoverPhoto;

Answer 1

这可能是 z-index 的问题。

尝试将 style={{ z-index: 9999 }} 添加到您想要的元素之上。看看这是否有效。