如何使div的顶部和底部透明

Question

我正在制作一个内容长于我想要查看的高度的 div，所以我使用了 20em 的高度，并制作了溢出：滚动。 这工作很好，但我想给它添加一些效果。

我怎样才能使顶部和底部 50px 的不透明度为 0.7？ 所以当内容被滚动“离开”时它会产生效果。

谢谢！

<div>
<ul>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>

</ul>

风格：

height:25em;
overflow:scroll;

Answer 1

演示

演示：

 #wrapper { position: relative; } #wrapper:before, #wrapper:after { content: ''; position: absolute; left: 0; right: 0; height: 30px; /* Height of the effect */ } #wrapper:before { top: 0; /* Use your background color, assuming white: */ background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)); } #wrapper:after { bottom: 0; /* Use your background color, assuming white: */ background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); } #mydiv { background: red; height: 20em; overflow: auto; border: 0 solid transparent; border-width: 10px 0; /* 10px to be able to read first and last lines */ }

 <div id="wrapper"> <div id="mydiv"> Your content </div> </div>

Answer 2

你可以在顶部和底部添加两层，注意它会覆盖你的内容，所以我建议它不超过 20px。 这是一个带有透明封面的示例，但您可以使用漂亮的 PNG 渐变代替：

 .fixed_height { position: relative; } .fixed_height_content { padding: 20px 0; height: 100px; overflow-y: scroll; } .cover_top { position: absolute; left: 0; top: 0; right: 0; height: 20px; background: red; opacity: .3; } .cover_bottom { position: absolute; left: 0; bottom: 0; right: 0; height: 20px; background: red; opacity: .3; }

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Opacity</title> <style type="text/css"> </style> </head> <body> <div class="fixed_height"> <div class="fixed_height_content"> <p>Some content<br />more<br />more<br />more<br />more</p> <p>Some content<br />more<br />more<br />more<br />more</p> <p>Some content<br />more<br />more<br />more<br />more</p> <p>Some content<br />more<br />more<br />more<br />more</p> </div> <div class="cover_top"></div> <div class="cover_bottom"></div> </div> </body> </html>

Answer 3

我想你可能会喜欢这个。 试试这个。

<style>    
#boxBorder {
    height: 3em;
    overflow: hidden;
    }
#boxBorder:hover {
height: 5em;
overflow: hidden;
}
#boxBorder:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px; 
    bottom: 0;
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(256,256,256,0));   
}
</style>

我的 div 就像

<div id="boxBorder">
    Vis meis ipsum cu, est ad modus facilis, ut est modus alienum consulatu. Mel ut primis dissentias. Doming omittam necessitatibus eam ei, simul vocibus complectitur at eam. Aliquid dolorem laboramus pri et. Porro utroque facilis ex has, pro eripuit ullamcorper te, an audiam civibus voluptaria mei.

    Consul iuvaret te eam. Eu usu modus nonumy nostrud, his ne facilis maiestatis. Nec clita nonumes ea, solet noluisse vix cu. Te vel altera verterem sapientem, quo corrumpit theophrastus ne.
    Quo iusto exerci assentior cu, ius erat velit timeam ea. Te modo offendit consectetuer has, id ius utamur quaerendum. Ut choro neglegentur nec, ea iusto feugait est. Feugait reprimique mel id, mel ad indoctum definitionem, nostrum apeirian ad pro.

一个谨慎的错误。

如何使div的顶部和底部透明

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-11-23 01:00:22

演示：

解决方案2
1 2013-11-23 00:53:32

解决方案3
0 2018-10-02 09:42:13

如何使div的顶部和底部透明

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-11-23 01:00:22

演示：

解决方案2 1 2013-11-23 00:53:32

解决方案3 0 2018-10-02 09:42:13

解决方案1
2 已采纳 2013-11-23 01:00:22

解决方案2
1 2013-11-23 00:53:32

解决方案3
0 2018-10-02 09:42:13