css - Transparente Bildlaufleiste während Bild im Hintergrund des Körpers

Ich habe dieses Problem: Ich habe ein Bild und rgba im Hintergrund des Körpers, und möchte den Hintergrund meiner Bildlaufleiste transparent machen. Aus irgendeinem Grund möchte es nicht transparent sein und stattdessen ist es weiß. Ich weiß nicht, was :(
HTML falsch:css - Transparente Bildlaufleiste während Bild im Hintergrund des Körpers

<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/

Quelle

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

Ich würde Ihnen empfehlen, eine Bildlaufleiste Javascript verwenden, um Ihre Bildlaufleiste zu kolorieren/skin. Das Problem mit CSS3 ist, dass dies für alte Browser nicht mehr unterstützt wird. So passiert es oft, dass das, was für moderne Browser gut aussieht, auf den meisten alten Browsern versagt. Vor allem, wenn das CSS3-Tag relativ neu ist. – Sascha

@Sascha Oh du bist so falsch, etwas, das mit CSS getan werden kann, ist viel besser als die Verwendung von Javascript :) Benutzer kann nicht Stile laden. –

@ Adéla: Aber es ist nicht Cross-Browser-kompatibel dann. – Sascha

am Beispiel Basierend gefunden here, sollte es möglich sein:

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>

Quelle

2016-07-15 18:27:20

Ich persönlich würde empfehlen, ein jQuery oder Javascript-Plugin für diese Art von Sache zu verwenden. Mein Grund ist ... Browser-Unterstützung! Warum sollten Webkit-Browser all die lustigen Sachen bekommen?

Ich habe dieses Plugin ein paar Mal verwendet http://jscrollpane.kelvinluck.com. Es funktioniert ziemlich gut. Es gibt eine Tonne da draußen.

Alles, was Sie tun müssen, ist das Plugin zu installieren und zu initialisieren.

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

Hoffe, das hilft!

Quelle

2016-07-15 19:01:38 kcroake88

css - Transparente Bildlaufleiste während Bild im Hintergrund des Körpers

Antwort

Verwandte Themen