英文:
How to place one element on top of another using flexbox?
问题
我试图将文本放在图片的顶部。我想要使用Flexbox来实现这一目标，而不使用position属性。是否可以使用Flexbox实现？
英文:
I'm trying to place text on top of an image. I want to achieve this using only Flexbox, without using the position property. Is it possible with Flexbox?
const Component = () => {
return (
<section>
<img src={mountains} />
<p className="paragraph">Hello everyone</p>
</section>
);
};
export default Component;
答案1
得分: 0
要么使用一个位置属性，要么将图像作为带有背景图像的div。
<div style={{backgroundImage: 'url("mountain.jpg")'}}> //图像链接在这里
<p className="paragraph">大家好</p>
</div>
英文:
Either u use a position property, or make the image as a div with background image
<div style={{backgroundImage: 'url("mountain.jpg")'}}> //Image link here
<p className="paragraph">Hello everyone</p>
</div>
答案2
得分: 0
你可以在弹性容器内使用绝对定位。
谢谢 
英文:
You can make use of absolute position within the flex container.
Thanks
答案3
得分: 0
在CSS中被称为“英雄图片”，你可以这样做：
<div style={{backgroundImage: 'url("image.jpg")', backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundCover: "cover"}}>
<p className="paragraph">Hello everyone</p>
</div>
你可以在这个div内部使用display: flex来改变p标签的位置。
英文:
In css ia called "Hero image", you can do like this:
<div style={{backgroundImage: 'url("image.jpg")', backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundCover: "cover"}}>
<p className="paragraph">Hello everyone</p>
</div>
You can work with display flex inside of this div to change de "p" tag position.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论