容器內背景圖片上的文字

Question

我想要在頂部帶有文字的響應式img。 Ive嘗試了幾種不同的方法，當我嘗試使其具有響應性時，我會一堆扭結半到達那里，因此，如果有人有一個簡單的解決方案，我將不勝感激。

代碼段演示：

 .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>

Answer 1

您可以嘗試一下，這是代碼

<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>

Answer 2

嘗試將position設置為absolute或fixed

.img-fluid{
    max-width:100%;
    height:auto;
    opacity:0.4;
    position: absolute;
}

Answer 3

您可以使用font-size: calc(2vw + 2vh + 2vmin) （根據需要調整值）以使文本對視口大小具有響應性：）

 .container { position: relative; } .container h1 { position: absolute; top: 0; left: 20px; font-size: calc(2vw + 2vh + 2vmin); } .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"> <h1>Header</h1> </div>

Answer 4

對於圖像，請使用以下概念：

{
    display: table; 
    position: relative; 
    width: 100%; 
    height: auto;
}

使文字顯示在圖像上的概念

{
    display: table-cell;
    verticl-align: middle;
    position: absolute;
}

並調整圖像上的文字的頂部或底部或左側或右側}，使用img-responsive類不更改所有視圖中圖像的寬度和高度。

Answer 5

HTML:

<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>

CSS:

.banner img{position:relative; width:100%; height:auto;}
 .banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
 line-height:30px;}

容器內背景圖片上的文字

問題描述

5 個解決方案

解決方案1
2 2017-12-16 08:48:49

解決方案2
1 2017-12-16 08:42:42

解決方案3
1 已采納

解決方案4
0 2017-12-16 08:58:53

解決方案5
0 2017-12-16 09:08:16

容器內背景圖片上的文字

問題描述

5 個解決方案

解決方案1 2 2017-12-16 08:48:49

解決方案2 1 2017-12-16 08:42:42

解決方案3 1 已采納

解決方案4 0 2017-12-16 08:58:53

解決方案5 0 2017-12-16 09:08:16

解決方案1
2 2017-12-16 08:48:49

解決方案2
1 2017-12-16 08:42:42

解決方案3
1 已采納

解決方案4
0 2017-12-16 08:58:53

解決方案5
0 2017-12-16 09:08:16