cesium默認全屏按鈕自定義

1  隱藏默認的svg

2  修改它默認的按鈕邊框，背景

3   修改它點擊時的樣式

代碼如下：

 1 .cesium-viewer-fullscreenContainer {  2  position: absolute;  3  top: 100px;  4  right: 24px;  5  width: 48px;  6  height: 48px;  7 }  8 
 9 .cesium-button:focus { 10     border-color: #001328; 11 } 12 
13 .cesium-button { 14     background-color: #001328; 15     fill: #001328; 16     background-image: url("../images/fullScreen.png"); 17     background-size: 20px; 18     background-repeat: no-repeat; 19     background-position: center; 20 } 21 
22 .cesium-button:hover { 23  border: 1px solid #22272B; 24     background-color: #001328; 25     background-image: url("../images/fullScreen.png"); 26     background-size: 20px; 27     background-repeat: no-repeat; 28     background-position: center; 29 } 30 
31 .cesium-svgPath-svg { 32  display: none; 33 }

效果如下：

 

 這個按鈕就是我自定義的了。

.cesium-viewer-fullscreenContainer 可以改變按鈕的位置和大小

.cesium-button:focus 改變點擊時的顏色等

.cesium-button 控制按鈕的背景色啥的

.cesium-button:hover 為了更改它默認時的划過設置，你可以再根據需要自定義一個，覆蓋它原來的樣式

.cesium-svgPath-svg 這就是cesium按鈕中畫的那個圖，你可以給它隱藏了