html - css - 透明滚动条,而 body 背景中的图像

标签 html css scrollbar background-image

我有这个问题:我在 body 背景中有一个图像和 rgba,并且想让我的滚动条背景透明。由于某种原因,它不想透明,而是白色。我不知道怎么了:(
HTML:

<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;
    }

J fiddle : https://jsfiddle.net/bc9Lc5rj/

最佳答案

基于找到的示例 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>

关于html - css - 透明滚动条,而 body 背景中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38402549/

相关文章:

html - Bootstrap 3.3.7 折叠按钮问题(不起作用)

css - Spark UI 显示格式错误(损坏的 CSS)

jquery - 使用输入文本框向 Bootstrap 下拉列表添加选项

html - TD 中的可滚动 DIV 在 WebKit 中有效,但在 Gecko 中无效

python - wxPython:制作可滚动的 DC

java - 垂直滚动条返回的值与它们在 Java 小程序中应返回的值相反

html - 如何让md-chips水平溢出?

html - 复选框已选中但内容不会滑动

css - 按下鼠标更改背景图像

javascript - 根据子元素的值更改父元素的 CSS