css - 透明滚动条，而身体的背景图像

我有这个问题：我有一个图像和身体的背景rgba，并希望使我的滚动条的背景透明。出于某种原因，它不想透明，取而代之的是白色。我不知道什么是错:(
HTML：css - 透明滚动条，而身体的背景图像

<body> 
<p><!--- TEXT ---></p> 
</body>

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/

来源

2016-07-15 Adéla Němcová

我会建议你使用滚动条javascript来为你的滚动条着色/皮肤。 CSS3的问题是，现在旧版浏览器不支持这个功能。所以经常发生的事情是，现代浏览器看起来很不错，最常用的浏览器就是这样。特别是如果CSS3标签是相对新的。 – Sascha

@Sascha哦，你真的错了，用CSS可以做的事情要好得多，然后使用javascript :)用户不能禁用样式加载.. –

@Adéla：但它不是跨浏览器兼容的。 – Sascha

基于发现here的例子中，它应该是可能的：

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>

来源

2016-07-15 18:27:20

我个人建议使用jQuery或javascript插件来处理这类事情。我的理由是...浏览器支持！为什么webkit浏览器能够获得所有有趣的内容？我使用过这个插件几次http://jscrollpane.kelvinluck.com。它工作得很好。那里有很多东西。

所有你需要做的就是安装插件并初始化它。

$('.container').jScrollPane();

希望这有助于！

来源

2016-07-15 19:01:38 kcroake88

css - 透明滚动条，而身体的背景图像

回答

相关问题