這可能與CSS 3

我有一個在另一個兩個DIV。這可能與CSS 3

<div class="outside"> 
<div class="inside"></div> 
</div>

外部div具有20px的填充。裏面的div有很多的內容，可滾動。是否有可能使用CSS3的漸變（alpha？）功能來使內部div的頂部和底部在滾動時淡入外部div？

還是我必須使用透明背景圖像來實現這一目標？

來源

2010-09-10 Taho

您可以將內部div與其他元素包圍起來，以便在正確的方向上呈現適當的漸變。

來源

2010-09-11 00:35:03

我不這麼認爲。我想你也許可以用插圖的box-shadow做到這一點，但我不認爲這是你後的效果：

body, .outside { 
    background:#fff; 
} 
.inside { 
    background:#ccf; 
    box-shadow:0 -20px 20px 0px #fff inset; -moz-box-shadow:0 -20px 20px 0px #fff inset; -webkit-box-shadow:0 -20px 20px 0px #fff inset; 
    height:100px; 
    overflow:auto; 
    width:200px; 
}

來源

2010-09-14 08:52:35 tagawa

你可以嘗試這樣的

#outside { 
    background-image: -webkit-gradient(
     linear, right top, left top, from(rgba(255, 255, 255, 1.0)), 
     to(rgba(255, 255, 255, 0)) 
    ); 

    background-image: -moz-linear-gradient(
     right center, 
     rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95% 
    ); 
}

東西

如果您需要多個漸變，您可能必須使用色塊，並且您可以使用此工具來完成此操作。 http://gradients.glrzad.com/

完成選擇後，複製代碼並用rgba（）替換rgb（），然後再添加1個值（在本例中爲不透明度）。使用0表示完全透明。

祝你好運！

來源

2010-09-14 09:05:25 Marko

是的，在rgba中使用背景漸變是解決這個問題的方法。 – 2010-09-14 09:15:07

另一種答案，而不是使用CSS3，但我敢肯定，這就是你要找的效果： http://www.cssplay.co.uk/menu/fade_scroll用途，而不是新的CSS屬性的PNG/GIF格式，但它在瀏覽器上運行回IE5。

來源

2010-09-19 12:57:34 tagawa

是的。這是我尋找的確切效果。是否有可能只使用CSS3？我並不需要向後兼容。 – Taho 2010-09-22 06:54:06

回答

相關問題