帶純色的背景漸變

我必須做到以下幾點： div的頂部是漸變圖像，然後在底部繼續爲純色。我可以用簡單的CSS來做到這一點嗎？我知道以下是無效的。帶純色的背景漸變

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

注意：第一225px，其圖像填充，應該是沒有背景色

來源

2013-07-29 marcias

據我所知，你需要使用一個漸變的純色，這樣就可以正確設置。

的CSS將是：

.imgbg { 
    width:255px; 
    height:355px; 
    background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8); 
    background-position: 0px 0px, 0px 112px; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 255px 112px, 255px 233px; 
}

下面是your updated fiddle

基本詢問服務應該是罰款瀏覽器支持多背景，唯一的問題是與IE < = 8漸變背景可能是一個問題與IE9，但我認爲它應該工作（我無法測試IE9）。如果確實存在問題，請參閱colozilla以獲得修復。

來源

2013-07-29 17:13:32 vals

嗯，這是我正在尋找的東西，只剩下2個問題：這是如何crossbrowser？其次，這是如何在動態高度div中工作的？我問這個，因爲你使用了背景大小的屬性。 - 我剛剛刪除了這個屬性，它對我很有用。 – marcias

我編輯了包含crossbrowser信息的答案。關於圖像大小，我想不說明圖像的大小不應該是一個問題，所以漸變，但我不太確定。 – vals

我會做到以下幾點：

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

這將只是把你的背景div上方的圖像;其餘的部分將是您爲整個div背景選擇的顏色。

來源

2013-07-29 12:52:34

嗯，你試過這個嗎？我使用的是鉻合金，它在任何地方都可以使用這種顏色，即使在圖像下面，它也是透明的。 – marcias

也許我不明白你的問題，但將圖像放在圖像下會出現什麼問題？如果它是與背景顏色相同的漸變色。查看我之前做過的網站：[http://mychinesephrases.com]（http://mychinesephrases.com），我把漸變放在'body'對象上。 –

檢查一下，我的圖像在小提琴中。現在你可以看到粉紅色在圖像下.imgbg {width：350px;高度：300像素;背景：＃f7d8e8 url（'blue2.hu/danone/nogravity/img/right_column_bg_top.png'）我想要的是，粉紅色應該只在圖片的結尾下方開始。 – marcias

看看這個小提琴，告訴我這是不是你想要的。

FIDDLE

HTML

<div class="imgbg"></div>

CSS

.imgbg { 
    width:255px; 
    height:355px; 
    background:#f7d8e8 url('http://placehold.it/255x255') no-repeat; 
}

來源

2013-07-29 13:25:24 AnaMaria

我也做一個鏈接： http://jsfiddle.net/YPcVB/1/ – marcias

帶純色的背景漸變

回答

相關問題