Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So stellen Sie die Bildlaufleiste in CSS transparent ein

王林
Freigeben: 2023-01-06 11:13:18
Original
6453 Leute haben es durchsucht

Die Möglichkeit, die Bildlaufleiste in CSS transparent zu machen, besteht darin, den Stil [::-webkit-scrollbar {height: 0;width: 0;color: transparent;}] zur Bildlaufleiste hinzuzufügen.

So stellen Sie die Bildlaufleiste in CSS transparent ein

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Wir können den Transparenzeffekt der Bildlaufleiste erzielen, indem wir den folgenden Stil festlegen:

::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}
Nach dem Login kopieren

Passen Sie die Höhe und Farbe der Bildlaufleiste an

/*定义滚动条样式(高宽及背景)*/
::-webkit-scrollbar {
    width: 6px;   /* 滚动条宽度, width:对应竖滚动条的宽度  height:对应横滚动条的高度*/
    background: #007acc;
}
/*定义滚动条轨道(凹槽)样式*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
    border-radius: 3px;
}
/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    height: 100px;    /* 滚动条滑块长度 */
    background-color: #ccc;
}
Nach dem Login kopieren

Teilen von Lernvideos: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Bildlaufleiste in CSS transparent ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage