我認爲HTML本身就令人困惑。我也做了縮略圖類的相關層。當我們從左向右讀取HTML時呈現HTML。因此,在圖像之前放置標題會使圖像顯示在頂部並覆蓋文本。
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
對於這項工作,每個thumbnail
類需要是relative
開始爲每個單獨的層。所以thumbnail
類被設置爲相對。 任何設置爲absolute
(.latestWorkTitle
)的對象都將從相對對象的top
和left
位置開始。
你需要調整一些細節,但我希望這可以幫助。