gpt4 book ai didi

html - 容器内背景图像上的文本

转载 作者:太空宇宙 更新时间:2023-11-03 21:10:02 24 4
gpt4 key购买 nike

我想要一个顶部带有文本的响应式 img。我尝试了几种不同的方法,当我尝试让它响应时,我遇到了一些问题,所以如果有人有简单的解决方案,我将不胜感激。

JSFiddle

代码片段演示:

.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<div class="container">
<h1>Header</h1>
</div>
</div>

最佳答案

You can try this , here is the code

<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text within container</h2>

<div class="container">
<img src="abc.jpg" alt="abc" style="width:100%;">
<div class="centered">Centered</div>
</div>

</body>

关于html - 容器内背景图像上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47843897/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com