css-正文背景中的图像时透明滚动条
[英]css - Transparent scrollbar while image in background of body
问题描述
I have this problem: I have an image and rgba in background of body, and want to make my scrollbar's background transparent. 
我有一个问题：我在主体背景中有一个图像和rgba，并想使滚动条的背景透明。 For some reason it doesn't want to be transparent and in stead it's white. 由于某种原因，它不希望是透明的，而是白色的。 I don't know what's wrong:( 我不知道怎么了:(
HTML: HTML：
<body>
<p><!--- TEXT ---></p>
</body>
CSS: CSS：
body
{
background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("http://picalls.com/wp-content/uploads/2015/03/Amazing-night-sky.jpg") center top no-repeat fixed;
}
::-webkit-scrollbar
{
background: transparent;
width: 10px;
}
Jsfiddle: https://jsfiddle.net/bc9Lc5rj/ Jsfiddle： https ：//jsfiddle.net/bc9Lc5rj/
2 个解决方案
解决方案1
0 2016-07-15 18:27:20
Based on the example found here , it should be possible: 根据此处找到的示例，应该可以：
html { overflow: auto; } body { position: absolute; top: 0; bottom: 0; overflow-y: auto; background: #FF0000; } ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background: transparent; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: #FFF; }
<body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at pharetra massa, vel molestie lectus. Vivamus vehicula tempor arcu ac fringilla. Mauris varius vel nibh quis vehicula. Duis scelerisque suscipit feugiat. Cras ornare dolor nibh, vel suscipit eros volutpat eget. Phasellus id nisl mi. Donec laoreet ipsum ac tortor dapibus lobortis. Morbi dictum, arcu egestas dictum porta, eros ex rutrum ex, a rhoncus dui sapien vel orci. Morbi id ornare justo. Proin a blandit tortor. Praesent et ultricies diam, et lacinia odio. Morbi metus risus, auctor sit amet semper vel, interdum ut elit. Donec consequat interdum purus. Donec iaculis pellentesque lorem vitae malesuada. Aliquam sed ullamcorper elit. In mattis neque eu leo ullamcorper sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id urna nec orci rhoncus cursus. Pellentesque pulvinar orci eget metus aliquam, vel rutrum erat maximus. Nullam pharetra mi dui, sed ullamcorper orci tristique vel. Curabitur ut eleifend orci. Pellentesque nec ipsum ut ipsum cursus consectetur. Nunc eu mattis ante, ac scelerisque lacus. Sed in venenatis mauris. Integer sodales libero et ante pellentesque lacinia. Duis iaculis feugiat nunc, in malesuada turpis faucibus vel. Cras congue ornare nulla non tincidunt. Donec sed commodo felis. Proin dignissim blandit tellus, id sagittis turpis fermentum quis. Integer lacus quam, finibus nec posuere et, sagittis eget purus. Sed et dolor venenatis, pulvinar ante sed, suscipit magna. Morbi nec auctor magna, id elementum ipsum. Morbi quis ligula libero. Suspendisse in mi eget enim finibus blandit. Praesent lobortis massa nec est tristique pharetra. Praesent pellentesque, metus non congue varius, diam enim gravida nisi, ut ultrices eros nulla et nisi. Maecenas molestie sit amet ex sit amet feugiat. Maecenas sodales augue eget est scelerisque, id tincidunt velit rhoncus. Quisque ut fermentum risus, eget posuere nulla. Morbi accumsan orci quis pretium dictum. Fusce ornare lectus dui, et laoreet nulla mattis posuere. Aliquam maximus gravida finibus. Duis posuere metus eros, ultrices euismod odio posuere sed. Quisque tempus tortor nec facilisis facilisis. Sed arcu elit, bibendum vitae tincidunt id, auctor quis justo. Nam auctor quam a pretium accumsan. Sed ornare, nisl a posuere lacinia, erat eros pulvinar orci, vitae congue lorem ligula sed justo. Vestibulum pulvinar velit ut molestie tristique. Quisque feugiat purus nisl. Sed pharetra nec metus vel sollicitudin. Vestibulum tempor ipsum et mauris interdum, quis imperdiet nisl semper. </p> </body>
解决方案2
0 2016-07-15 19:01:38
I personally would recommend using a jQuery or javascript plugin for this sort of thing. 我个人建议为这种事情使用jQuery或javascript插件。 My reason being... browser support! 我的理由是...浏览器支持！ Why should webkit browsers get all the fun stuff? 为什么Webkit浏览器会得到所有有趣的东西？
I've used this plugin a few times http://jscrollpane.kelvinluck.com . 我已经多次使用此插件http://jscrollpane.kelvinluck.com 。 It works pretty well. 效果很好。 There are a ton out there. 那里有一吨。
All you need to do is install the plugin and initialize it. 您需要做的就是安装插件并对其进行初始化。
$('.container').jScrollPane();
Hope this helps! 希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.