我在嘗試做一個簡單的視覺效果。當用戶的鼠標靠近& quot遺忘& quot畫面上,一片濃重的灰色& quotborder & quot出現在它的周圍。但是,我不想使用實際的邊框,因為1)我既想要圖像又想要& quotborder & quot有彎曲的角。2)我想要& quotborder & quot最終在它的下面有文字。因此,我使用了一個背景,它是不可見的,直到用戶懸停在它上面。
但是,結果真的不靠譜。背景僅顯示圖像下方約3/4處。怎么回事?
img {
width: 100px;
}
.gameContainer {
padding: 20px;
margin: 0px 20px;
}
.gameContainer:hover {
background-color: hsl(0, 0%, 70%);
/*Why oh why does this background only show up 3/4s down the image? */
}
.game {
border-radius: 10px;
}
<span class="gameContainer"><img src = "https://upload.wikimedia.org/wikipedia/en/4/4b/The_Elder_Scrolls_IV_Oblivion_cover.png" class = "game"></span>
# # #你的。gameContainer是display: inline:其內容高度將自動設置為其周圍塊的行高。
請嘗試使用display: inline-block:
.gameContainer {display: inline-block}
/*Your previous code*/
img {width: 100px}
.gameContainer {
padding: 20px;
margin: 0px 20px;
}
.gameContainer:hover {background-color: hsl(0, 0%, 70%)}
.game {border-radius: 10px}
<span class="gameContainer"><img src = "https://upload.wikimedia.org/wikipedia/en/4/4b/The_Elder_Scrolls_IV_Oblivion_cover.png" class = "game"></span>
上一篇python 解析時間戳
下一篇python 文本控制符