Več

Javascript API Scalebar halo CSS Styling

Javascript API Scalebar halo CSS Styling


Zelo sem nov v HTML, CSS in JS.

Na svoj zemljevid sem dodal lestvico meril in ugotovil, kako dodati halo okoli nalepk, da jih bo bolje videti v temnem ali svetlem ozadju, vendar tega ne morem ponoviti na sami črti. Spodaj je vzorec, ki sem ga našel na spletu in ga uporabljam za nalepke.

.esriScalebarLabel, .esriScalebarLineLabel, .esriScalebarSecondNumber, .esriScalebarLabelDiv {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff }

Poskusil sem uporabiti to isto kodo (skupaj z drugimi lastnostmi CSS-ja, kot so box-shadow, outline, text-shadow) na izbirniku .esriScalebarLine, a najbližje, kar sem dobil, je boarder okoli vsebnika vrstic in ne dejanske vrstice same.

Moja vrstica je trenutno videti takole:

In rabim ga, da bo videti bolj tako:

Ste opazili bel obris, ki obdaja črto? To rabim! Kakšne ideje o tem? Ali uporabljam napačen izbirnik?


Nisem mogel ugotoviti, nisem prepričan, ali je to mogoče. Lahko dobite belo polje v velikosti celotnega območja vrstice, ki je videti precej neumno. To lahko storite tako, da spremenite CSS .esriScalebarLine v border-bottom-color: white; slog meje-dna: trden; border-bottom-width: 5px; Lahko pa dodate še en div in spremenite barvo ozadja za div, da zakrijete celotno območje okoli lestvice div.

Mogoče bi lahko podvojili lestvico in jo naredili debelejšo.

Prav tako se mi res ne zdi veliko. Nikoli me ni skrbela težava pri branju lestvice na spletnem zemljevidu. VEČINA ljudi si tega niti ne bo ogledala, tisti, ki ga pogledajo, pa ga po potrebi pogledajo ali premaknejo v bolj berljivo ozadje.

Če imate temno oblikovan zemljevid, lahko spremenite css za lestvico lestvice in naredite celoto belo, tako da preglasite css za .esriScalebarLine na border-color: white.