web前端开发中各种图片引入方式及其优缺点

胡羽杨 發表於 2020-6-8 01:23:00

web前端开发中各种图片引入方式及其优缺点

<img class="medium-zoom-image lazyload" data-tag="bdshare" data-src="https://img.php.cn/upload/article/000/000/006/5ea8f0df18657440.jpg">
 
前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是<code><img></code>标签，或者是通过CSS <code>background</code> 属性，还可以使用 SVG <code><image></code>。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。
在本文中，我们会学习引入图像的各种方式，以及每种方式的优点和缺点，以及何时使用和为什么使用它们。
<h2 id="item-1">HTML <code><img></code> 元素</h2>
最简单的情况下，<code>img</code>元素必须包含<code>src</code>属性:
 
<pre class="hljs xml"><img src="cool.jpg" alt=""></pre>
1、设置宽度和高度属性
在页面加载时，它们会在页面图像加载时发生一些布局变化。为了避免这种情况，我们可以为它设置<code>width</code>和<code>height</code>属性:
 
<pre class="hljs xml"><img src="cool.jpg" width="200" height="100" alt=""></pre>
虽然对某些人来说，这可能看起来有点过时，但它是有用的。让我们用图片来清楚地理解这个概念：
<img alt="1.gif" class="medium-zoom-image lazyload" title="1588126436724559.gif" data-tag="bdshare" data-src="https://img.php.cn/upload/image/457/624/411/1588126436724559.gif">
你注意到了吗，右边的图片即使还没有加载也会保留其空间吗？这是因为宽度和高度已经设置好了。它有明显的区别！
<blockquote>
事例源码：https://codepen.io/shadeed/pen/a42ab701809acfecdd4d8f472bb6c043?editors=0100
</blockquote>
2、通过 CSS 隐藏图像
可以用CSS隐藏图片，但是它仍然会被加载到页面中。因此，在执行此操作时请小心，如果一个图片应该被隐藏，那么它可能是出于装饰的目的。
 
<pre class="hljs css">img {
display: none;
}</pre>
同样，以上内容也不会阻止浏览器加载图片，即使该图片在视觉上是隐藏的。原因是 <code><img></code> 被视为替换元素，因此我们无法控制其加载的内容。
3、可访问性问题
HTML图片应该通过将 <code>alt</code> 属性设置为有意义的描述来访问，这对屏幕阅读器用户来说是非常有帮助的。
但是，如果不需要 <code>alt</code> 描述，请不要删除，如果删除了就会读出图片的 <code>src</code>！这对可访问性(无障碍)环境是非常不利的。
不仅如此，如果图片因为某种原因没有加载，并且它有一个明确的 <code>alt</code>，它将作为一个备用值回退显示。既然有一些有趣的事情我想让大家知道，那我们就从视觉上说说吧。
我们有以下图片：
 
<pre class="hljs java"><img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt=""></pre>
当<code>src</code>无效，图片没有加载时。第一个没有<code>alt</code>属性，而第二个是空的<code>alt</code>属性，下面是它们的视觉效果：
<img alt="1.png" class="medium-zoom-image lazyload" title="1588126628582596.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/766/536/690/1588126628582596.png">
没有<code>alt</code>的图片仍然保留了它的空间，这很混乱，而且不利于访问。虽然另一个折叠了，以适应其空的 <code>alt</code> 属性的内容，但由于它的边框，导致了它作为一个小点出现。
但是，当<code>alt</code>属性有值，它看起来是这样的：
<img alt="2.png" class="medium-zoom-image lazyload" title="1588126891665289.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/856/370/855/1588126891665289.png">
这不是一个很好的反馈吗?此外，当图像源失败时，可以向它们添加伪元素。
4、响应式图像
<img alt="3.png" class="medium-zoom-image lazyload" title="1588126907693370.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/440/650/445/1588126907693370.png">
<code><img></code>的优点在于可以针对特定视口大小将其扩展为具有多个版本的照片。我们有两种不同的方式来生成一组响应式图像：
1)、<code>srcset</code>属性
 
<pre class="hljs xml"><img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt=""></pre>
这很简单。对我来说，<code>srcset</code>可以根据屏幕宽度显示多个图像尺寸，这并不是一种完美的解决方案。它让浏览器选择合适的图像，而我们对此无能为力。
2)、HTML <code>picture</code> 元素
 
<pre class="hljs xml"><picture>
<source srcset="large.jpg" media="(min-width: 800px)" />
<source srcset="medium.jpg" media="(min-width: 500px)" />
<img src="small.jpg" />
</picture></pre>
另一种选择是使用<code><picture></code>元素。我更喜欢这种方式，因为它更容易预测。
<blockquote>
事例源码：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100
</blockquote>
5、调整图像大小
<img alt="4.png" class="medium-zoom-image lazyload" title="1588127098757638.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/357/789/885/1588127098757638.png">对于<code><img></code>，我们还可以使用的一组很好的特性<code>object-fit</code>和<code>object-position</code>。它们可以控制<code><img></code>的大小和定位，就像CSS背景图像。
<code>object-fit</code> 值有：<code>fill, contain, cover, none, scale-down</code>。例如：
 
<pre class="hljs css">img {
object-fit: cover;
object-position: 50% 50%;
}</pre>
<h2 id="item-3">CSS背景图片</h2>
使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图像的主要用途应该是用于装饰目的。
1、何使用 CSS 背景图片
首先，我们需要一个元素
<pre class="brush:html;toolbar:false"><div class="element">Some content</div></pre>
<pre class="brush:css;toolbar:false">.element {
background: url('cool.jpg');
}</pre>
2、多个背景
使用CSS背景图片的好处是可以设置多个背景。考虑以下示例：
 
<pre class="hljs css">.element {
background: url('cool-1.jpg'), url('cool-2.jpg');
}</pre>
3、隐藏图像
我们可以在特定的视口上隐藏和显示图片，而不会让图片被下载。如果未使用CSS设置图片，则不会下载该图片。这是比使用<code><img></code>更多的好处。
<pre class="brush:css;toolbar:false">@media (min-width: 700px) {
.element {
background: url('cool-1.jpg');
}
}</pre>
在上面的示例中，我们有一个背景图像，仅在视口宽度大于<code>700px</code>时显示。
4、可访问性问题
如果使用不当，背景图像可能会影响可访问性。例如，将其用于文章主题，这对于文章至关重要。
5、非开发人员无法下载
你可能会觉得很有趣，但是普通人知道，如果要保存图像，只需单击鼠标左键，然后选择保存即可。 CSS背景图片并非如此，我们必须先检查元素，然后在<code>DevTools</code>中的<code>url</code>中打开链接，然后才能下载随CSS添加的图像。
6、伪元素
可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。对于 <code><img></code> 来说，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。
<h2 id="item-4">SVG <code><Image></code></h2>
SVG被认为是一种图像，它最大的功能是在不影响质量的情况下进行缩放。此外，使用<code>SVG</code>，我们可以嵌入<code>JPG</code>、<code>PNG</code>或<code>SVG</code>图像。参见下面的 HTML:
 
<pre class="hljs xml"><svg width="200" height="200">
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg></pre>
<img alt="5.png" class="medium-zoom-image lazyload" title="1588127642174528.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/717/501/848/1588127642174528.png">
你是否注意到了<code>prepareAspectRatio</code>？这样一来，可以使图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。
当<code><image></code>宽度较大时，它将填充其父级（SVG）宽度而不会拉伸。
<img alt="6.png" class="medium-zoom-image lazyload" title="1588127656388596.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/793/908/790/1588127656388596.png">
这非常类似于 CSS 中的<code>object-fit: cover</code>或<code>background-size: cover</code>。
1、可访问性问题
关于SVG 的可访问性，这使我想起了<code><title></code>元素。例如，我们可以像下面这样添加它：
 
<pre class="hljs xml"><svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg></pre>
我们还可以使用<code><desc></code>元素
 
<pre class="hljs xml"><svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<desc>A meaningful description about the image</desc>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg></pre>
2、非开发人员无法下载
在检查元素并复制图像的URL之前，不可能下载嵌入到SVG中的图像。然而，如果我们想要阻止用户下载特定的图像，这可能是一件好事。至少，它将减少下载图像的机会很容易。
<blockquote>
事例源码：https://codepen.io/shadeed/pen/38225ba6b2cd706ca5bff48c131e83ce?editors=1100
</blockquote>
<h2 id="item-5">用例</h2>
1、Hero Section
在构建<code>hero section</code>时，有时我们需要在标题和其他内容下方的图像。参见下图：
<img alt="7.png" class="medium-zoom-image lazyload" title="1588127942402086.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/196/721/777/1588127942402086.png">
注意这里有一个图像。你将如何构建它？好吧，让我先补充一些要求：
<ul>
<li>
在与后端CMS整合时，图片应该是很容易动态变化的。
</li>
<li>
其上方有一个覆盖层，有助于使内容易于阅读。
</li>
<li>
图像有三种尺寸：小、中和大。它们每个都用于特定的视口。
</li>
</ul>
在开始解决方案之前，让我们先问问自己这种背景的性质。这是一些入门问题：
<ol>
<li>为用户保留这个图像很重要吗，还是可以跳过它？</li>
<li>我们是否需要在所有视口尺寸上使用它？</li>
<li>它是静态的还是动态变化的？</li>
</ol>
Hero - 解决方案1
通过使用多个CSS背景，我们可以将一个背景作为叠加层，将另一个背景作为实际图像。请看下面的CSS：
 
<pre class="hljs css">.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
background-repeat: no-repeat;
background-size: 100%, cover;
}</pre>
虽然此解决方案有效，但可以使用 JavaScript 动态更改背景图片。见下面：
 
<pre class="hljs xml"><section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">

</section></pre>
我添加了一个内联的CSS背景。虽然这是可行的，但它看起来很丑，而且不实用。
也许我们可以使用CSS变量？让我们来探索一下。
 
<pre class="hljs xml"><section class="hero" style="--bg-url: url('landscape.jpg')">

</section></pre>
<img alt="8.png" class="medium-zoom-image lazyload" title="1588128133723758.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/187/425/894/1588128133723758.png">
现在，我们可以轻松地更新<code>--bg-url</code>变量来动态更改背，这比内联的东西好一百万倍。
解决方案1要点：
<ol>
<li>
解决方案只有在图像不重要的情况下才是好的
</li>
<li>
当无法从后端CMS动态更改图片时
</li>
</ol>
<blockquote>
事例源码：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522
</blockquote>
Hero - 解决方案2
该方案是可以使用一个 <code>img</code> 标签：
 
<pre class="hljs javascript"><section class="hero">
<h2 class="hero__title">Using Images in CSS</h2>
An article about which and when to use
<img src="landscape.jpg" alt="">
</section></pre>
在CSS中，我们需要将图片绝对定位在内容下方，并且还需要使用伪元素作为叠加层。
 
<pre class="hljs css">.hero {
position: relative;
}

.hero img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}

.hero:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}</pre>
此解决方案的优点在于，可以轻松更改图片的<code>src</code>属性。同样，如果图像很重要，它将会更加有用。
另外，我喜欢使用HTML <code><img>的地方是可以在图片没有加载的情况下添加一个回退方法，这个回退至少可以保持内容的可读性。</code>
 
<pre class="hljs css">.hero img {
/* 其他样式 */
background: #2962ff;
}</pre>
<img alt="9.png" class="medium-zoom-image lazyload" title="1588128301161907.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/928/276/264/1588128301161907.png">
好处是，只有在图像源失败的情况下，背景才会起作用。那不是很酷吗？
<blockquote>
事例源码：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100
</blockquote>
2、网站 Logo
网站 <code>Logo</code>是很重要的，因为它可以将网站与其他网站区分开。要嵌入Logo，我们有一些选择：
<ul>
<li>
<code><img></code> -> <code>png,jpg, orsvg</code>
</li>
<li>
内联SVG
</li>
<li>
背景图像
</li>
</ul>
让我们学习使用哪种技术以及如何选择合适的技术。
带有很多细节的 Logo
当一个LOGO有很多细节或形状时，用内嵌式SVG可能没有那么多好处。我建议使用 <code><img></code>，图片类型可以是<code>png</code>、<code>jpg</code> 或 <code>svg</code>。
<img alt="10.png" class="medium-zoom-image lazyload" title="1588128501954991.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/708/605/514/1588128501954991.png">
<pre class="brush:html;toolbar:false"><a href="#"><img src="logo.svg" alt="Nature Food"></a></pre>
需要动画的简单 Logo
<img alt="11.png" class="medium-zoom-image lazyload" title="1588128551670205.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/100/100/887/1588128551670205.png">
我们有一个简单的logo ，其中包含形状和文字。悬停时，形状和文本需要更改颜色。怎么做？对我来说最好的解决方案是使用嵌入式SVG。
HTML
 
<pre class="hljs xml"><a href="#">
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
 <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
 <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
 <tspan x="63.923" y="36.923">Rect</tspan>
 </text>
</g>
</svg>
</a></pre>
CSS
 
<pre class="hljs css">.logo rect,
.logo text {
transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
fill: #4a7def;
}</pre>
<blockquote>
事例源码：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100
</blockquote>
响应式 Logo
这让我想起了Smashing Magazine的logo。我喜欢它从一个小图标变成一个完整的Logo。参见下面的模型：
<img alt="12.png" class="medium-zoom-image lazyload" title="1588128667712507.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/181/611/476/1588128667712507.png">
完美的解决方案是使用<code><picture></code>元素，可以在其中添加logo 的两个版本。如下所示：
 
<pre class="hljs javascript"><a class="logo" href="/">
<picture>
<source media="(min-width: 1350px)" srcset="sm-logo--full.svg">
<img src="sm-logo.svg" alt="Smashing Magazine">
</picture>
</a></pre>
在CSS中，我们需要将视口的宽度更改为等于或大于<code>1350px</code>。
 
<pre class="hljs css">.logo {
display: inline-block;
width: 45px;
}

@media (min-width: 1350px) {
.logo {
width: 180px;
}
}</pre>
这是简单而直接的解决方案。
<blockquote>
事例源码：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100
</blockquote>
带有渐变的Logo
<img alt="13.png" class="medium-zoom-image lazyload" title="1588128788920296.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/941/732/444/1588128788920296.png">
当 logo 具有渐变时，从<code>Illustrator</code>或<code>Sketch</code>等设计应用程序将其导出的过程可能并不完美，有时会中断。
使用SVG，我们可以轻松地为<code>logo</code>添加渐变。我添加了<code><linearGradient></code>并将其用作文本填充。
 
<pre class="hljs javascript"><svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
 <stop offset="0%" stop-color="#4a7def"></stop>
 <stop offset="50%" stop-color="#ab4787"></stop>
</linearGradient>
</defs>
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
 <tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg></pre>
<blockquote>
事例源码：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100
</blockquote>
3、用户头像
对于用户头像，它们具有很多形状，但最常见的是矩形或圆形。在此用例中，会介绍一个对你有用的重要技巧。
首先，让我们看下面的模型。请注意，我们有一个完美的化身，并且<code>100％</code>清晰。
<img alt="14.png" class="medium-zoom-image lazyload" title="1588128884376935.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/234/500/559/1588128884376935.png">
但是，当用户上传半白色头像或非常浅的头像时，这个设计就不太好了。
<img alt="15.png" class="medium-zoom-image lazyload" title="1588128913516771.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/804/934/975/1588128913516771.png">
注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆形。这就是一个问题，为了解决这个问题，我们应该在头像内部添加一个边框，这将是在图像太亮的情况下作为备用。
<img alt="16.png" class="medium-zoom-image lazyload" title="1588128927386329.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/627/937/218/1588128927386329.png">
我们有几个选择
<ul>
<li>
<code><img></code>元素
</li>
<li>
具有<code><div></code> 的 <code><img></code>
</li>
<li>
有CSS背景的<code><div></code>
</li>
<li>SVG <code><image></code></li>
</ul>
哪一个最好？我们来探索探索。
使用 HTML <code><img></code>
你可能首先想到的是添加一个边框，对吧?让我们来探讨一下这个问题。
 
<pre class="hljs css">.avatar {
border: 2px solid #f2f2f2;
}</pre>
<img alt="17.png" class="medium-zoom-image lazyload" title="1588129193158832.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/285/744/591/1588129193158832.png">
我们的目标是使内部边框与图像融合在一起，这种不太实用。
使用具有 <code><div></code> 的 <code><img></code>
现在的问题是，要添加内部边框，我们不能使用<code>box-shadow</code>，因为它无法在图像上使用。解决方案用<code><div></code>包裹头像中，并添加专用于内部边框的元素。
HTML
<pre class="hljs javascript"><div class="avatar-wrapper">
<img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
<div class="avatar-border"></div>
</div></pre>
CSS
<pre class="hljs css">.avatar-wrapper {
position: relative;
width: 150px;
height: 150px;
}

.avatar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
}</pre>
通过在<code><div></code>上设置一个10%的黑色边框，我们可以确保边框与暗色图像融合，只有在图像颜色较浅的情况下，边框才会显现出来。请看下面的模拟图。
<img alt="18.png" class="medium-zoom-image lazyload" title="1588129297299768.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/942/926/398/1588129297299768.png">
<blockquote>
事例地址：https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100
</blockquote>
<h4>具有CSS背景的 <code><div></code></h4>
如果我要使用<code><div></code>来显示头像，则可能表示该图像具有装饰性。我记得一个用例，它是分散在页面中的随机头像。
<img alt="19.png" class="medium-zoom-image lazyload" title="1588129339270709.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/691/903/738/1588129339270709.png"> 我们可以有这样的东西：
HTML
<pre class="hljs javascript"><div class="avatar" style="--img-url: url(shadeed2.jpg)"></div></pre>
CSS
<pre class="hljs css">.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}</pre>
<blockquote>
事例地址：https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100
</blockquote>
<h4>使用 SVG <code><image></code></h4>
对我来说，这是最有趣的解决方案。我在检查Facebook的新设计时注意到了它。
<pre class="hljs xml"><svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg></pre>
先对其进行剖析，它包含以下内容：
<ul>
<li>用于将图像剪切为圆形(circle )的蒙版(mask )</li>
<li>对其应用了蒙版的group</li>
<li><code>image</code>本身带有<code>preserveAspectRatio =“ xMidYMid”</code></li>
<li>用于内边框的圆圈</li>
</ul>
<pre class="hljs css">circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}</pre>
<blockquote>
事例地址：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100
</blockquote>
4、带图标的输入框
<img alt="20.png" class="medium-zoom-image lazyload" title="1588129523767179.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/595/383/373/1588129523767179.png">
通常会看到带有图标的输入框，如何添加？当输入被聚焦时会发生什么？让我们来探索一下。
<pre class="brush:html;toolbar:false">
<label for="name">Full name</label>
<input type="text" id="name">
</pre>
对我来说，处理这种情况的最佳解决方案是CSS背景图片。简单，快捷，不需要添加更多元素。
<pre class="brush:css;toolbar:false">input {
background-color: #fff;
background-image: url('user.svg');
background-size: 20px 20px;
background-position: left 10px center;
background-repeat: no-repeat;
}</pre>
要更改焦点上的图标颜色，我们可以使用url编码的SVG，并且很容易做到这一点。Yoksel的这个工具很棒。
<blockquote>
事例源码：https://codepen.io/shadeed/pen/81f64125425dba02f7a0b725fa837381?editors=0110
</blockquote>
5、CSS 打印
用户可能需要打印web页面。假设我们有一份食谱，你想把它打印出来，这样你就可以在厨房里看它，而不需要查看你的手机或电脑。
对于包含说明性步骤的菜谱，重要的是将它们打印出来，否则用户将无法从打印web页面中获得任何好处。
避免使用图像作为CSS背景
当一个图像作为CSS背景被包含进来时，它不会被打印出来，取而代之的是一个空白区域。如下图所示：
<img alt="21.png" class="medium-zoom-image lazyload" title="1588129705653840.png" data-tag="bdshare" data-src="https://img.php.cn/upload/image/422/873/970/1588129705653840.png">
就是这样的情况。我们可以通过强制浏览器显示图片来解决这个问题，虽然这对Firefox和IE来说不起作用。
<pre class="brush:css;toolbar:false;">.element {
background: url('cheesecake.png') center/cover no-repeat;
-webkit-print-color-adjust: exact; /* 强制浏览器以打印模式呈现背景 */
}</pre>
但是，使用HTML <code><img></code> 会更安全，因为它可以打印而不会出现任何问题。
<blockquote>
事例源码：https://codepen.io/shadeed/pen/97d7b13765718132a4fe71b6bc43e388?editors=0100
</blockquote>
全文完。 
来源：https://www.cnblogs.com/it-Ren/p/13063321.html

頁: [1]

琼殿技术论坛's Archiver

web前端开发中各种图片引入方式及其优缺点