Question

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

我需要将此文字对齐图像的底部

我试过把它放在css中：

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

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

.............

其次我希望这可以通过屏幕宽度进行扩展...如果宽度小于13“笔记本电脑的宽度..删除图像但保留文本

我该怎么做

Answer 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类并将p元素绝对放在5px的底部。

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

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

Answer 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;
}

Answer 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;
    }
}

Answer 4

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我添加了

top: 394px;
color: #fff;

{p} .head_img p jsfiddle

中的

Answer 6

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

中的代码

如何在图像css上显示文本

7 个答案: