Question

当前正在使图像的文本变为顶部，并使图像更暗。

但是，我尝试执行的操作似乎无效。我无法使图像变暗，并且文本位于图像的上方或下方，但在尝试时不位于顶部。

红色方块=图像，黑色方块表示H1（透明）的位置。

HTML：

class FilterInputs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      missions: [],
      // set our filter condition
      rocketNameQuery: '',
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    axios.get('http://localhost:8001/api')
      // extract data to a variable named missions and set our state
      .then(({ data: missions }) => {
        this.setState({ missions });
      });
  }

  searchHandler(event) {
    event.preventDefault();
    const rocketNameQuery = event.target.value.toLowerCase();
    // update rocketNameQuery leaving state.missions untouched
    this.setState({ rocketNameQuery });
  }

  checkFilterQuery(mission, rocketNameQuery) {
    return mission.rocket.rocket_name.toLowerCase() === rocketNameQuery;
  }

  render() {
    const { missions, rocketNameQuery} = this.state;
    return !rocketNameQuery 
      ? missions.map(mission => <div key={/* Add a unique key */}>{/* render logic */}</div>)
      : (
        <div>
          // check if our item rocket name match our rocketNameQuery
          {missions.map(mission => this.checkFilterQuery(mission, rocketNameQuery)
            // match ? render logic
            ? <div key={/* Add a unique key */}>{/* Your render logic here */}</div>
            // no match ? return null which will render nothing
            : null
          ))}
        </div>
      );
  }
}

CSS：

 <div id="mainarticle">
            <a href="artikels.html"> 
                <img src="images/interview.jpg">
                <div id="ontop">
                <h3> Lol </h3>  
                </div>
            </a>
        </div>

JSFiddle

Answer 1

您可以将position: absolute用于文本：

#ontop {
        position:absolute;
        top:0;
        left:0;

以及具有黑色背景的其他div（类别“较暗”）参见示例：

http://jsfiddle.net/smollet92/uLf2jme3/6/

Answer 2

当您要重叠网页中的两个元素时，必须对两个元素都使用定位的父元素（包装器），并使用其中一个元素来调整父元素的大小，同时将另一个元素在父元素的整个空间上拉伸：

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

这将有效地使其覆盖（并呈现整个位置）定位的父对象。

当您希望一个元素设置容器的大小而另一个元素覆盖结果区域时，此方法很有用。

.article {
  position: relative;
}
.article img {
  width: 100%;
  display: block;
  height: auto;
}
.ontop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
}
body {
  margin: 0;
}

<div class="article">
  <img src="https://picsum.photos/800/300">    
  <a href class="ontop"> 
      <div >
        <h3> Lol </h3>  
      </div>
  </a>
</div>

在特定情况下，如果您希望结果元素具有确定的高度（100vh），则可以简单地在子级上将该值设置为min-height，并在子级上使用background-image父级，而无需重叠任何内容或使用position-ing：

.article {
  background: url(https://picsum.photos/800/600) no-repeat 50% 50% /cover;
}
.ontop {
  position: relative;
  background-color: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  min-height: 100vh;
}
.ontop h1 {
  top: 0;
  padding: 15px;
  width: 100%;
  background-color: rgba(0,0,0,.65);
  position: absolute;
  margin-top: 0;
  text-align: center;
}
body {
  margin: 0;
}
body * {
  box-sizing: border-box;
}

<div class="article">
  <a href class="ontop"> 
    <h1>This would be a title</h1>
      <div >
        <h3> Lol </h3>  
      </div>
  </a>
</div>

注意：为了让您对position有更多了解，我在第二个示例中使用了稍有不同的方式，将<h1>元素放置在{{1}内}。

如何在图像上方放置h1，在中间放置一个段落并使图像变暗？

2 个答案: