添加疊加圖像到CSS圖像？

我有一個圖像，我想用一些文字在底部顯示DIV。我知道這很容易，但由於這是一個手機網站，所有的圖像都是不同的尺寸，所以我必須使它的寬度達到100％，這使得所有東西都隨着你的浮動圖像等等而變化。現在所擁有的：添加疊加圖像到CSS圖像？

HTML

<div class='individual_picture_capption_wrapper'> 
<div class='individual_picture_capption_wrapper_two'> 
<div class='individual_picture_caption_wrapper_three'><div class='individual_picture_caption'>Some Caption Here</div></div> 
<img src='http://myflashpics.com/get_image.php?short_string=8ibjr&size=big' class='individual_picture_big' /> 
</div> 
</div>

CSS

.individual_picture_caption { 
    padding: 12px 10px 12px 10px; 
    font-size: 13px; 
    text-align: center; 
} 
.individual_picture_capption_wrapper { 
    position: relative; 
    background-color: #ffffff; 
} 
.individual_picture_capption_wrapper_two { 
    margin-left: 0px; 
    background-color: #cccccc; 
} 
.individual_picture_caption_wrapper_three { 
    float: left; 
    position:absolute; 
    width: 100%; 
    left: 0; 
    background-image: url('http://myflashpics.com/viewer/images/transparent_black_70.png'); 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    color: #ffffff; 
    margin: 15px 30px 15px 15px; 
}

我的問題是我想讓它漂浮在底部，並且標題懸掛在邊緣上。我知道這是因爲我左邊的餘量。

請幫忙！我不知道該從哪裏出發。如果你想讓它看到它的行動，click here。

謝謝！

來源

2011-06-19 iosfreak

PHP代碼無關緊要;發佈客戶端瀏覽器看到的HTML。 –

我知道。這是顯示的HTML。這一切都在一個簡單的回聲。你的意思是你想看一張測試圖片？ – iosfreak

@Jared Farrish：我改變了一些東西。沒有改變任何對齊或功能，但我做到了。 – iosfreak

刮開保證金;添加bottom:15px;並設置width:auto; left:20px; right:10px

來源

2011-06-19 00:19:49

這樣做。改變了尺寸，它的工作。 – iosfreak

很高興幫助。對於簡短的回答抱歉，我很懶惰。 :) –

如果你想在你需要修改你的CSS在這樣的保證金和頭寸底部標題：

.individual_picture_caption_wrapper_three { 
    margin: 0 0 7px 7px; 
    bottom:0; 
}

來源

2011-06-19 00:15:02 andyb

是的，但是當我爲框添加左/右邊距時，沒有任何反應。如果我添加'left：7px;'，它會在右邊懸掛7個像素，寬度爲100％。思考？ – iosfreak

爲什麼要在框中添加左/右邊距？它完全適合沒有左/右邊距。你也可以從該規則中刪除'float：left' - 它不需要'position：absolute'。 – andyb

添加疊加圖像到CSS圖像？

回答

相關問題