淡入淡出底部或頂部的文本

我想創建一個特定大小的列表，但它的內容可能大於列表。淡入淡出底部或頂部的文本

我認爲如果列表中有項目，並且它們在底部和頂部淡出，同時還包含也包含列表的容器的背景圖像，我認爲它會非常好看。這比預期的要難得多，而且我很難找到適合這種事情的指南。

下面的圖像顯示了預期的結果

enter image description here

這甚至可能嗎？提前致謝。

編輯：

我已經看了this和this，但因爲有背景的背景圖像我無法使用這些技術，而不是純色

來源

2015-02-11 Abe Fehr

還有，你試過嗎？由於'：nth-child（）/：最後一個孩子/ etc/etc'可能會在其上拋出「不透明度」？ – Darren 2015-02-11 03:48:58

我不想修改特定列表元素的不透明度，因爲那樣會要求JavaScript經常檢查哪些元素位於div的底部。我正在考慮更多地在列表上有某種掩模（Photoshop術語），在頂部或底部有必要時有梯度。我會更新這個問題來說出我試過的東西 – 2015-02-11 03:54:53

我能得到一個醜陋的原型在一起。此只適用於-webkit-瀏覽器（Chrome瀏覽器，Safari等），但它可能會指向正確的方向，並幫助您適應跨瀏覽器兼容。

.con{background:#0f0; color:#fff;} 
 
ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

<div class="con"> 
 
    <ul> 
 
    \t <li>thing1</li> 
 
    \t <li>thing2</li> 
 
    \t <li>thing3</li> 
 
    \t <li>thing4</li> 
 
    \t <li>thing5</li> 
 
    \t <li>thing6</li> 
 
    </ul> 
 
</div>

來源

2015-02-11 04:05:01

這是一個夢幻般的解決方案！如果只是有一個跨瀏覽器的方式：'（道具給你，但保持聯繫的所有要求 – 2015-02-11 04:15:26

其實，你的答案讓我這樣，我很可能使用：http://www.html5rocks.com/en/tutorials/masking/adobe/ – 2015-02-11 04:18:10

好，我希望它指向別人在正確的方向以及 – 2015-02-11 04:21:14

通過jQuery將不透明度應用於元素是相當簡單的。以此爲例。我們有以下標記：

<ul id="derp"> 
    <li>One</li> 
    <li>One</li> 
    <li>One</li> 
    <li>One</li> 
    <li>One</li> 
    <li>One</li> 
</ul>

現在使用以下jQuery，我們可以將不透明度應用於元素。

jQuery(document).ready(function(){ 

    var count = jQuery("#derp li ").length; 
    var interval = (10/count)/10; 
    var newval = 1.0; 

    jQuery("#derp li").each(function(i, item){ 
     if(i == 0) { 
      newval = newval; 
     } else { 
      newval = parseFloat(newval) - parseFloat(interval); 
     } 
     jQuery(item).css('opacity', (newval)); 
    }); 

});

JSFiddle Example

來源

2015-02-11 04:00:16 Darren

這並不理想，因爲我有很多列表項，列表的大小並不是很大。我更新了你的小提琴，以顯示可能的情況：http://jsfiddle.net/1jytg3f6/1/ – 2015-02-11 04:10:24

@AbeFehr生病追加答案的帳戶很快。 – Darren 2015-02-11 04:17:19

@AbeFehr爲什麼你隱藏溢出，如果你的列表「」不是很大「？ – Darren 2015-02-11 05:20:38

你可以只用HTML和CSS做 - 申請一個div在內容，並給它一個漸變背景：

更新之後OP的評論。

HTML：

<div id = "body"> 
    <div id = "frame"></div> 
     <div id = "content"> 
     ITEM<br/> 
     ITEM<br/> 
     ITEM<br/> 
     ... 
     </div> 
</div>

CSS

#body { 
    width:300px; 
    height:300px; 
    position:relative; 
} 
#frame { 
    position:absolute; 
    top:0; 
    left:10%; 
    width:80%; 
    height:80%; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9)); 
} 
#content { 
    background:#eaeaea; 
    width:100%; 
    height:100%; 
    text-align:center; 
}

FIDDLE

來源

2015-02-11 04:04:58 sideroxylon

淡入淡出底部或頂部的文本

回答

相關問題