使用css將圖像添加到容器背景

首先，我有我的容器。使用css將圖像添加到容器背景

.container { 
    width: 780px; 
    background: #FFF; 
    margin: 0 auto; 
}

然後，我添加這個圖像的目標是跨容器跨越780像素顯示圖像。圖像將在底部淡出爲純黑色，然後與背景顏色混合。

.container { 
     width: 780px; 
     background: #FFF url(picture.png) no-repeat center top; 
     margin: 0 auto; 
}

什麼也沒有發生我這樣做的時候，它的工作時，我通過「身體」做一些類似我的網站背景是什麼。

感謝您的幫助。

編輯：我想到的越多，是否必須通過HTML來做到這一點，有沒有辦法讓圖像插入HTML背後的一切，不能與交互？

編輯2：從第一個2回答幫助我在此：

.container { 
    width: 780px; 
    background: url(Portfolio Assets/PortfolioUnderNavbg.png) no-repeat center top #000; 
    margin: 0 auto; 
    height: 100%; 
}

但它仍然是行不通的，我忘了提，頁面確實有一個頭，所以我想我必須以某種方式使背景圖像向下移動到標題下，但仍在容器中。我讀到背景只接受高度百分比調整，但這是較舊的文檔。有沒有辦法讓它從容器的頂部向下100px開始？

來源

2012-05-18 Programmer XYZ

jsfildde它，使其更容易看到你在說什麼。 –

失蹤的關閉大括號錯誤，還是您遇到問題的原因？你可以用CSS來做到這一點，這就是「背景」的作用。 –

對不起，我只是沒有複製它。我現在會解決它。 –

更改爲background:url('your-image.png') no-repeat center top #FFF

發生了什麼事是#FFF顏色代碼重寫圖像的URL。

Some docs.

來源

2012-05-18 16:40:56 CamelBlues

我改變了這一點，它仍然不會顯示圖像，這是如此奇怪，因爲從字面上20行，我有完全相同的事情爲整個頁面的背景，它的作品完美。 –

我覺得別的地方有些東西搞砸了。正如另一位評論者所說，jsFiddle會有所幫助。另外，嘗試在.container – CamelBlues

.container 
    { 
     width: 780px; 
     background: #FFF url(picture.jpg) no-repeat center top; 
     margin: 0 auto; 
     height:100%; 
    }

我覺得....你給高度：100％;像以上代碼

來源

2012-05-18 16:44:47

.container { width：780px; 背景：#FFF網址（'picture.jpg'）無重複中心頂部; margin：0 auto; 身高：'your-img-size'; }

我想這是工作......

來源

2012-05-18 17:06:47

上添加'display：block;'我很抱歉，我不明白你的意思。這是我第一次，沒有工作。 –

注意......你需要設置你的容器類的「高度」。如果失敗，請嘗試更改背景：#FFF，導致某種顏色可能會「擦除」img; –

我有身高：100％，因爲容器應該與內容的長度一起縮放。我會嘗試一些不同的顏色代碼，看看會發生什麼。 –

使用css將圖像添加到容器背景

回答

相關問題