css3 svg 背景圖 data:image/svg+xml;base64
阿新 • • 發佈：2019-02-03
看到一個關於下拉選單的樣式
.search_form select { -webkit-appearance:none!important;-webkit-border-radius:0; background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+) no-repeat 100% center; border: 1px solid #ccc; border-radius: 0; color: #555; display: block; font-size: 1.6rem; line-height: 1.1; padding: 0.625em; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; vertical-align: middle; margin-top:10px; margin-right:3px; }
其中有一個是背景圖片 是base64 引入的，比較好奇 就查了一下，網上的解釋：
圖片的內容經過base64編碼了，data:image/svg+xml;base64其實是圖片的內容。主要目的是減少瀏覽器和伺服器之間的連線數。提高伺服器的併發能力！我的下拉選單的效果是這樣的
那個base64引入的svg圖就是那個小三角
追根到底，我用php 把那個base64 解密了下，程式碼如下：
瀏覽器瀏覽的結果就是那個小黑色三角的圖片，瀏覽器中檢視原始碼，原始碼如下：$str = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+"; echo base64_decode($str);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="12px" y="0px" width="24px" height="3px" viewBox="0 0 6 3" enable-background="new 0 0 6 3" xml:space="preserve"><polygon points="5.992,0 2.992,3 -0.008,0 "/></svg>原來如此！實際上是個svg的圖片而已！！