Question

我在网页的封面图像上方绘制边框区域时遇到麻烦。边框区域的内容显示在图像上方，但边框和背景未显示。

边界应该看起来像这样：

我希望封面照片具有相同的体验，因此它可以覆盖一半的照片，但背景要坚实。

这是下面的一些相关代码。如果有人可以给我一些指导，让他们知道如何将它们正确地层叠在一起，那太好了。

CompanyProfile.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 }}添加到所需元素之上。看看是否可行。

Answer 2

如果您将bootstrap CDN添加到您的项目中，只需在此div之前添加clearfix类

<div className="clearfix"/>
<div className="container-fluid page">

https://getbootstrap.com/docs/4.3/utilities/clearfix/

如何在Bootstrap中的封面图像上覆盖边框？

2 个答案: