Openlayers地图背景透明度设置
生活随笔
收集整理的這篇文章主要介紹了
Openlayers地图背景透明度设置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ?在實際開發中，為了美觀，需要設置Openlayers中地圖div中除了地圖之外的地方的透明度，這個通過設置.ol-viewport的樣式就可以完成。項目測試代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>背景色測試</title><link rel="stylesheet" href="css/ol.css" /><script type="text/javascript" src="js/ol.js"></script></head><body style="margin: 0;padding: 0;"><div style="width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background-color: red;"></div><div style="width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;" id="map"></div><script>var map = new ol.Map({view: new ol.View({center: [0, 0],zoom: 1}),layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map'});</script><style>.ol-viewport {/*完全透明*//*background-color: rgba(0, 0, 0, 0);*//*完全不透明*/background-color: rgba(0, 0, 0, 1);}</style></body></html>透明效果圖：
不透明效果圖：
總結
以上是生活随笔為你收集整理的Openlayers地图背景透明度设置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python初学笔记~
- 下一篇： 计算机无误的英语,“开电脑”的英语正确表