使用CSS的DIV中的圖像下的動態高度/梯度

我正在作爲公司的實習工作，業主詢問是否可以將出現在網站右側的隨機圖像淡入到底部附近（平淡無奇，下面會詳細介紹）。使用CSS的DIV中的圖像下的動態高度/梯度

到目前爲止，我已經建立了一個測試網站，這裏是一個頁面example。該網站使用Joomla CMS（不是我的選擇）。如果你看右邊有一個音樂家的形象，每一次刷新拉起一個不同的音樂家/圖像。我的老闆想讓我做的事情（因爲顯然我在修改他們的網站後的任務很少）是在圖像下使用其餘頁面高度緩慢過渡到背景顏色或透明（我認爲背景顏色會更容易）。到目前爲止，我的想法是，這是不可能的，但我想我會問你們。

我的主要問題是頁面的高度右列與頁面高度的高度動態匹配...如果可能的話。我知道如何讓它漸變，但高度問題困擾着我！

的CSS整個右列（無梯度，很明顯）是：

#columnrt { 
width:200px; 
background-color:#673601; 
float:right; }

如果檢查頁面上的源代碼，所述隨機圖像中的所謂的「隨機圖像」類示出了我有它是Joomla產生一種強烈的感覺......例如這樣你就可以找出什麼樣的形象是我講的：

<div class="random-image"><img src="/images/stories/sidebar/lubsym_nov11_017-crop.jpg" width="200" height="306"></div>

任何投入將是很好，謝謝大家！

PS：無償實習......我不想讓你們認爲我是在傾訴你們！

來源

2013-02-28 OnTheRidge

我明白你需要什麼，但不知道在確切的位置你需要它。可能我只是累了。你認爲你可以在Paint中製作一個小圖嗎？ – Lodder 2013-02-28 23:47:48

@Lodder - 這裏是一個示例隨機圖像模型的一個是在右側的梯度效果，我正在尋找，除了我試圖做動態與每個頁面高度和CSS，而不是修改每個圖像：http://imgur.com/WBm6eWt – OnTheRidge 2013-03-01 07:47:30

正如你所說，你的主要問題是製作與頁面一樣高的右列，即向下延伸至主要內容。這可以通過添加到CSS來解決：

#columnrt { 
width:200px; 
background-color:#673601; 
position:absolute; 
top: 0; 
right:0; 
bottom:0; 
}

這將使右列的高度正確擴展，允許您添加漸變。

來源

2013-03-01 00:59:46 ASGM

經過一些輕微的編輯，這基本上是我需要的，謝謝！ – OnTheRidge 2013-03-04 21:37:32

使用下面的CSS和一個DIV，你的任務將完成

td { position: relative; } 
.bg-gradient { background: blue; min-height: 100%; width: 200px; position: absolute; z-index:-1; }

添加這個div下 '.columnrt'

<div class="bg-gradient"></div>

給背景漸變你的願望」作爲第一個孩子.bg - 漸變'在css

來源

2013-03-01 07:04:06

這不起作用，因爲Joomla如何處理自定義HTML或其他原因......但下面的人解決它。謝謝回答！ – OnTheRidge 2013-03-04 21:38:41

使用CSS的DIV中的圖像下的動態高度/梯度

回答

相關問題