如何在背景中放置封面圖像？

Question

我使用以下代碼將圖像放置在div的背景中：

background: url(../images/cover-image.jpg) no-repeat 50% 100% fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 30rem;

但是我現在的問題是，我想在div中移動圖像的可見部分。 圖片的底部應位於div的底部，但我可以更改background:所有內容background: center bottom ， 50% 100%等）語句，什么也沒發生。

有人可以給我提示嗎？

Answer 1

嘗試使用

background-position: center bottom;

Answer 2

您需要刪除“背景”減速中的其他樣式，然后放入：

background-position:bottom;

在這里看到小提琴： https : //jsfiddle.net/xerf3z5j/

Answer 3

作為一行，這將是：

background: transparent url(../images/cover-image.jpg) center bottom / cover no-repeat fixed;

Answer 4

background-size：cover表示背景圖像將始終占據div的整個寬度和高度。

如果您卸下這些部分，則應該可以使用：

-webkit-background-size: cover;
-moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;