[英]How to have an image as a slider handle(CSS)
我想在我的 HTML 頁面上有一個帶有圖像作為句柄的 slider。 在互聯網上，我為此目的找到了一些東西，只是說要更改 CSS background屬性： background: url('image.png'); ...但這對我不起作用。 這是我的 slider 設置：
.slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity.2s; }.slider:hover { opacity: 1; }.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: blue; cursor: pointer; }.slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: blue; cursor: pointer; }
那么，你知道如何將圖像作為句柄嗎？ 在此先感謝，格雷格
body { overflow-y: scroll; } body::-webkit-scrollbar { background: black; } body::-webkit-scrollbar-thumb { background: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg') no-repeat; background-size: 50px 25px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <title>Document</title> </head> <body> <h3> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Cras in accumsan lectus. id lacinia ante, In consectetur, arcu in tempus tempor, ipsum nulla porta ipsum. id pulvinar felis ante at dolor. Nam hendrerit egestas tellus quis dignissim. Praesent dictum felis eu pulvinar dictum. Quisque non venenatis magna. Donec molestie quis massa sit amet lobortis. Nulla a dictum augue, Sed vestibulum venenatis libero. quis tincidunt turpis ultricies vitae. Ut eget suscipit magna, Praesent rutrum egestas odio. sit amet elementum eros vestibulum nec. Vestibulum id viverra odio, Mauris lobortis tincidunt ipsum. non pulvinar massa molestie ut, Mauris pulvinar nibh in elit eleifend. eu tempor erat fringilla. Suspendisse aliquam congue metus vitae aliquam. Etiam finibus erat eget tellus volutpat bibendum. Pellentesque iaculis leo et tellus rhoncus commodo; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Mauris volutpat metus eu eros convallis hendrerit. Cras vitae rutrum quam, Vestibulum vitae consequat ex. non luctus nisi. Nam sollicitudin est vitae sapien finibus bibendum. Phasellus consequat laoreet odio a placerat. Ut sagittis eget lorem non interdum, Fusce ligula purus, rhoncus quis sagittis vitae. bibendum in diam. Aenean fringilla rutrum nisl. In at dictum mi, Praesent tortor arcu, imperdiet nec finibus non. dignissim sit amet sapien, Praesent placerat, metus nec ultrices luctus, dui erat mattis velit. vel mollis nibh lorem non lorem, Class aptent taciti sociosqu ad litora torquent per conubia nostra. per inceptos himenaeos, Curabitur luctus nisl leo. ut efficitur purus tincidunt ultricies, Nullam pretium velit non ante tempus. vel fringilla augue porttitor. Morbi iaculis risus at tincidunt vehicula. Phasellus nec quam a magna faucibus porta. Etiam mollis ultrices sem vitae imperdiet, Morbi posuere nulla efficitur, suscipit ante ut. ullamcorper lectus. Proin sit amet nisi at lacus viverra tristique. Quisque nec lacus quis lorem mollis mollis fringilla et ante. Morbi aliquam suscipit finibus, Nullam in odio congue, consequat eros eget. pellentesque mauris, Orci varius natoque penatibus et magnis dis parturient montes. nascetur ridiculus mus. Suspendisse cursus nulla vel cursus consequat. Nunc porta rhoncus pellentesque. In blandit dui a vehicula molestie, Aliquam efficitur, risus id laoreet vehicula, purus orci aliquet massa. ut eleifend neque arcu vitae nibh. Duis posuere at metus at pulvinar. Phasellus venenatis eu leo nec scelerisque. Phasellus maximus non sem quis viverra, Aliquam scelerisque nunc ac massa ullamcorper. at euismod nisi iaculis. Maecenas interdum sed enim eget ultrices. Curabitur eget rutrum mi, Aenean facilisis imperdiet elit. sit amet iaculis sem ornare eu, Fusce quis congue lorem. non cursus odio. Duis sodales elementum tellus sed volutpat. Mauris tincidunt massa et condimentum ultrices. Nulla blandit rhoncus elementum, Phasellus tincidunt turpis quam. imperdiet tincidunt eros gravida sit amet, Morbi in condimentum metus. in condimentum nulla, Aenean ac turpis mollis, rhoncus augue a. aliquet enim. Curabitur commodo tincidunt tellus id maximus, Cras dolor neque, gravida et dolor id. scelerisque laoreet diam. Donec rhoncus egestas est a pretium, Vivamus cursus congue felis. at auctor diam pharetra in. Suspendisse nec laoreet nunc. Morbi ut elementum ante. </h3> </body> </html>
我注意到您在代碼中出錯的第一件事是您首先必須分配::-webkit-scrollbar以便您能夠在之后設計滾動條的所有內部元素。
注意：這僅適用於 Chrome/Safari，因為它是 -webkit-。
如何將 HTML CSS 圖像滑塊轉換為 Angular 圖像滑塊？
[英]How to convert a HTML CSS image slider into Angular image slider?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.