如何在图像css上显示文本[重复]答案

【问题标题】：How to display text over an image css [duplicate]如何在图像css上显示文本[重复]
【发布时间】：2014-09-26 14:51:59
【问题描述】：

我正在尝试在图像上显示一些文字：http://jsfiddle.net/5AUMA/31/

我需要在图片底部对齐此文本

我试着把它放在 css 中：

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    vertical-align:bottom;
}

但这不起作用......

......

其次，我希望它可以随屏幕宽度扩展......如果宽度小于 13 英寸笔记本电脑的宽度......删除图像但保留文本

我该怎么做

【问题讨论】：

jsfiddle.net/x1pmmq6m

标签： html css

【解决方案1】：

试试这个：

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position:relative;
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    bottom:5px;
    margin:0;
    padding:0;
}   

@media (max-width: 1366px) {
.head_img img { display:none; }
}

我添加了位置：相对；到 .head_img 类，并以 5px 的底部绝对定位 p 元素。

然后添加一个媒体查询以在屏幕宽度低于 1366 像素时隐藏图像。您将不得不调整该断点，但我相信这是 13 英寸笔记本电脑的常见屏幕宽度。

更新小提琴：http://jsfiddle.net/5AUMA/33/

【讨论】：

【解决方案2】：

http://jsfiddle.net/5AUMA/32/

您的标记设置不正确（将段落移动到包含图像的同一 div 中）

<body class ="body">
    <div class ="head_img">
          <div style="text-align:center;"><img style="min-width:50%; min-height:60%;"  src = "http://i.imgur.com/H56PB85.jpg"/>

        <p> display this text over the image <br> and at the bottom part of the image</br></p>
              </div>
    </div>
</body>

还要在容器 div 上查找 position:relative 以使所有浏览器都能正常工作

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position: relative; /* HERE */
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   bottom: 0;
    color: white;
}

【讨论】：

【解决方案3】：

您需要对您的 css 进行一些更改，以使其按如下方式工作。

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   top: 0;--> Added
   color: white;--> Added
}  

.head_img{
    <--Margin Removed-->
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
}

WORKING FIDDLE

现在要使您的图像隐藏在特定宽度中，您可以使用类似这样的媒体查询

@media (max-width: 768px) {
    .head_img img{
        display:none;
    }
}

【讨论】：

【解决方案4】：

试试这个

body {
  color: #202020;
  font-size: 100%;
  font-family: 'Maven Pro', sans-serif;
  line-height: 1.4em;
  min-height: 100%;
  background-color: #fdfdfd;
}
.head_img {
  margin-top: 10%;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: bold;
  font-style: italic;
  color: #000000;
  text-align: center;
  position: relative;
}
.head_img p {
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 5px;
  margin: 0;
  color: #fff;
}

<body class="body">
  <div class="head_img">
    <div style="text-align:center;">
      <img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
    </div>

    <p>display this text over the image
      <br>and at the bottom part of the image</br>
    </p>
  </div>
</body>

【讨论】：

【解决方案5】：

我已经添加了

top: 394px;
color: #fff;

在.head_img pjsfiddle

【讨论】：

如果图像被替换为具有不同高度的图像，则定位也必须改变。在图像容器中移动段落后，您最好使用bottom: 0
感谢 info@Luca 但是当我添加了 bottom:0;文字向上移动。

【解决方案6】：

body {
    background-color: #fdfdfd;
    color: #202020;
    font-family: "Maven Pro",sans-serif;
    font-size: 100%;
    line-height: 1.4em;
    min-height: 100%;
}
.innerimg {
    background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
    border: 2px solid;
    height: 500px;
    width: 500px;
}
.head_img {
    color: #000000;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
    width: 500px;
}
.head_img p {
    display: table-cell;
    height: 480px;
    text-align: center;
    vertical-align: bottom;
    width: 500px;
}

<body class ="body">
    <div class ="head_img">
          <div class="innerimg" style="text-align:center;">
               <p> display this text over the image <br> and at the bottom part of the image</br></p>
              
          </div>
      
       
    </div>
</body>

【讨论】：

【解决方案7】：

添加 HTML 标签

<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>

CSS

h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}

我已经更新了这个FIDDLe

中的代码

【讨论】：