海報圖盒子樣式是網頁設計中常用的一種樣式,而實現它的方式就是使用CSS。
.poster-box { position: relative; width: 100%; height: auto; overflow: hidden; } .poster-box img { width: 100%; height: auto; display: block; } .poster-box .poster-title { position: absolute; top: 0; left: 0; width: 100%; padding: 10px; font-size: 18px; color: #ffffff; background: rgba(0, 0, 0, 0.5); } .poster-box:hover .poster-title { background: rgba(0, 0, 0, 0.8); }
上面的CSS代碼中定義了海報圖盒子的樣式,包括盒子本身及其中的圖片和標題。其中,盒子的寬度為100%,高度為自適應的;盒子內的圖片使用display:block讓其充滿整個盒子;標題使用絕對定位,并設置左上角為起點,并使用rgba設置顏色和透明度。同時,使用:hover偽類,讓鼠標懸停時,標題的背景顏色變深,使整個海報圖盒子更有層次感。
上一篇css超出 左邊顯示出來
下一篇浮動元素和css