数据结构
网络
关系数据库管理系统 (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.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley ">
</body>
</html>在这里，您可以看到输出结果。我们的 SVG 文件看起来很棒，并且可以看到不透明度已添加为背景图像。
更新于：2020年2月25日
162 次浏览
广告