如何使div的顶部和底部透明
[英]How to make top and bottom of div transparent
问题描述
I am making a div with a content longer than what I want to view in height, so I used a height of 20em, and made overflow:scroll.
我正在制作一个内容长于我想要查看的高度的 div，所以我使用了 20em 的高度，并制作了溢出：滚动。 This work great, but I want to add some effect to it.这工作很好，但我想给它添加一些效果。
How can I do so the top and bottom 50px have a opacity of 0.7?我怎样才能使顶部和底部 50px 的不透明度为 0.7？ so it gets a effect when the content is scrolled "away".所以当内容被滚动“离开”时它会产生效果。
Thanks!谢谢！
<div>
<ul>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
</ul>
Style:风格：
height:25em;
overflow:scroll;
3 个解决方案
解决方案1
2 已采纳 2013-11-23 01:00:22
DEMO:演示：
#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>
解决方案2
1 2013-11-23 00:53:32
You can add two layers at top and bottom, note it will cover your content so I suggest it takes no more than 20px.你可以在顶部和底部添加两层，注意它会覆盖你的内容，所以我建议它不超过 20px。 Here is an example with transparent covers, but you can use nice PNG gradient instead:这是一个带有透明封面的示例，但您可以使用漂亮的 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>
解决方案3
0 2018-10-02 09:42:13
I think you may like this.我想你可能会喜欢这个。 Try this one.试试这个。
<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>
and my div is like我的 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.
an discere delenit.一个谨慎的错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.