欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

背景只在停機時間的四分之三出現

榮姿康1年前9瀏覽0評論

我在嘗試做一個簡單的視覺效果。當用戶的鼠標靠近& 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>