我想顯示在圖像上一些文字：http://jsfiddle.net/5AUMA/31/如何在圖像的CSS顯示文本
我需要在圖像的底部對齊這個文本
我試圖把這個在CSS ：
.head_img p {
position: absolute;
left: 0;
width: 100%;
vertical-align:bottom;
}
但這並不工作...
.............
其次我想這是可擴展性與屏幕的寬度......如果寬度小於13" 筆記本電腦..刪除圖像，但保留文本
我如何做到這一點
嘗試這種情況：
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" 筆記本電腦常見的屏幕寬度
您的標記設置不正確（移動在同一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容器，使事情的工作在所有瀏覽RS
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;
}
你需要做一些改動，以你的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;
}
現在使你的形象特別是寬度隱藏您可以使用媒體查詢像這樣
@media (max-width: 768px) {
.head_img img{
display:none;
}
}
試試這個
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>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>添加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
http://jsfiddle.net/x1pmmq6m/ – Kishan 2014-09-25 10:34:50