資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在響應式網站上使用向量圖形作為啟動畫面？
響應式網站的圖形可能會降低速度，但與向量圖形結合使用可以幫助最小化頻寬。透過這種方式，精美的圖形也能在移動網站上完美顯示。通常，canvas 和 SVG 用於此目的。
使用 HTML5 可縮放向量圖形 (SVG) 為多種螢幕尺寸建立設計，因為它可以完美地處理不同尺寸。輕鬆呈現基於向量的線圖，並且不用擔心裝置上的畫素問題，因為使用 SVG 建立的圖形與解析度無關。它會縮放結果並在瀏覽器中看起來很棒。
在這裡，我們將瞭解如何在響應式網站上使用向量背景。目前，我們有一個SVG 演示。讓我們看看如何使用向量檔案。首先，我們將執行 CSS 固定定位，寬度為 100%。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
</head>
<body>
<img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
</body>
</html>在這裡，您可以看到輸出結果。即使瀏覽器重新定位，我們的 SVG 檔案看起來也很好，並且執行良好，沒有任何失真。它仍然看起來很清晰，非常完美。
為了將其新增到背景中，我們進行了上述更改。但是，您還需要新增不透明度，因為背景影像通常是透明的。讓我們新增它。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.1;
}
</style>
</head>
<body>
<img src="https://tutorialspoint.tw/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley ">
</body>
</html>在這裡，您可以看到輸出結果。我們的 SVG 檔案看起來很棒，並且可以看到不透明度已新增為背景影像。
更新於：2020年2月25日
162 次瀏覽
廣告