CSS背景图和HTML的<img>标签怎么选?

简介: CSS背景图和HTML的<img>标签怎么选?

在开发中,我们可以使用 HTML 中的<img>标签来设置图片,也可以使用 CSS 背景来设置图片。除此之外,还可以使用 SVG <image> 来设置图片。那这些方式之间有哪些区别呢?下面就来看看这些方法都是怎么使用的,它们都有哪些优缺点,以及何时该使用哪种方法!

HTML <img> 标签

在最简单的情况下,img 元素必须包含 src 属性:

<img src="cool.jpg" alt="">

设置宽高

在页面加载时,它们会在页面图像加载时发生一些布局变化。为避免这种情况,可以为其设置 heightwidth 属性:

<img src="cool.jpg" width="200" height="100" alt="">

隐藏图像

可以使用 CSS 来隐藏图像,但是隐藏之后,它仍将加载到页面中。

img {
  display: none;
}

这段代码不会阻止浏览器加载图像,即使它在视觉上是隐藏的。 原因是 <img> 被认为是可替换元素,所以无法控制它加载的内容。

在 CSS 中,可替换元素的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。

图像可访问性

HTML图 像可以通过将alt属性设置为有意义的描述来访问。这对屏幕阅读器用户非常有用。

如果不需要 alt 描述,也不要删除它。如果删除了,图像 src 将被读出,这对可访问性非常不利。

来看下面两个图片:

html

复制代码

<imgclass="food-thumb"width="300"height="200"src="cheescake.jpg"><imgclass="food-thumb"width="300"height="200"src="cheescake.jpg"alt="">

这里,src 都无效且未加载。第一个没有设置 alt 属性,而第二个设置了一个空的 alt 属性。效果如下:没有 alt 的图像仍然保留其空间,这不利于可访问性。 而另一个折叠以适应其空 alt 属性的内容,这导致它由于具有边框而显示为一个小点。

但是,当有 alt 属性值时,它会是这样的:这样可以更好的向用户反馈,让用户知道这个加载失败的图片内容是什么。

除此之外,我们还可以使用伪元素来替换显示的默认替代文本,方法是将伪元素放置在默认文本的顶部,将其隐藏起来。

css

复制代码

img:after { 
  content: "\f1c5" " " attr(alt);
  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

效果如下:

响应式图像

<img> 的好处是它可以扩展为具有特定视口大小的图片的多个版本。

(1)srcset 属性

html

复制代码

<imgsrc="small.jpg"srcset="medium.jpg 500w, large.jpg 800w"alt="">

这是一个很简单的例子。不过,srcset 并不是根据屏幕宽度显示多个图像尺寸的完美解决方案。浏览器会选择合适的图像,我们无法控制。

(2)HTML picture 元素

html

复制代码

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

另一种方式就是使用 <picture> 元素。这种方式更容易且更可预测。

调整图像大小

CSS 中的 object-fit 和 object-position 属性可以与 <img> 标签一起使用。使用它们可以控制 <img> 的内容如何调整大小和定位,就像 CSS 背景图一样。

object-fit 的可能值为:fill、contain、cover、none、scale-down

可以这样使用:

css

复制代码

img {
  object-fit: cover;
  object-position: 50% 50%;
}

介绍完 <img> 元素,下面来看看 CSS 中的背景图。

CSS 背景图

要想设置背景图,首先需要一个 HTML 元素。

html
复制代码
<div class="element">content</div>
css
复制代码
.element {
  background: url('cool.jpg');
}

多重背景

CSS 背景图的好处是可以使用 CSS 轻松控制多个背景。来看下面的例子:

css

复制代码

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');}

隐藏图像

我们可以在特定视口上隐藏和显示图像,而无需下载它。如果图片没有设置 CSS,则不会下载。

css

复制代码

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

在上面的例子中,有一个背景图,它仅在视口宽度大于 700px 时显示。

图像保存

如果想要保存网页上的图像,只需右键单击然后选择保存即可。 但这不适用于 CSS 背景图。 如果不检查检查元素,就无法下载使用 CSS 添加的图像。想要下载背景图,只能在 DevTools 中打开背景图 url 中的链接来下载。

伪元素

我们可以将伪元素与 CSS 背景图一起使用,例如在图像顶部显示叠加层。 对于 <img>,这是不可能的,除非为叠加层添加一个单独的元素。

SVG

SVG 最大的优势是在不影响质量的情况下进行缩放。 此外,借助 SVG,可以嵌入 JPG、PNG 或 SVG 图像:

html

复制代码

<svgwidth="200"height="200">  <imagehref="cheesecake.jpg"height="100%"width="100%"preserveAspectRatio="xMidYMid slice" /></svg>

这里我们添加了一个 preserveAspectRatio 属性,这是使图像保持 SVG 的宽度和高度,而不会被拉伸或压缩。当 <image> 宽度较大时,它将填充其父级(SVG)宽度而不会被拉伸。

这和 CSS 中的 object-fit: coverbackground-size: cover 非常相似。

图像可访问性

当谈到 SVG 的可访问性时,就不得不说说 <title> 元素。 例如,可以像下面这样添加它:

html

复制代码

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

更重要的是,可以使用 <desc>元素:

html

复制代码

<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>

给 SVG 添加标题或描述之后,其访问性就提高了。

图像保存

和 CSS 背景图类似,在检查元素并复制图像的 URL 之前,不能下载嵌入在 SVG 中的图像。如果想要阻止用户下载特定图像,它可能会很有用。至少,它会减少轻松下载图像的机会。

怎么选?

下面通过五个例子,看看不同情况应该使用哪种设置图像方式。

文章标题背景

文章标题和简介下面有一张背景图:对于这张图片,有一些要求:

  • 图像可以通过后端进行动态更改;
  • 图像上有一个遮罩层,有助于使内容易于阅读;
  • 图片有三种尺寸:小、中、大,每个都用于特定的视口。

先来考虑几个问题:

  • 这张图片对用户来说重要吗,还是可有可无?
  • 是否需要在所有视口尺寸上都使用它?
  • 图片是静态的还是会动态变化?

(1)解决方案-1

我们可以使用多个 CSS 背景来实现,一个用于遮罩层,另一个是实际的背景图:

css

复制代码

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('landscape.jpg');
  background-repeat: no-repeat;
  background-size: 100%, cover;
}

这样是可以实现的。如果想要动态更改背景图,就可以使用内联 CSS:

html

复制代码

<sectionclass="hero"style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">  <!-- 内容区域 --></section>

这样是可行的,但是代码看起来很丑陋。或许可以使用 CSS 变量来修改一下?

html

复制代码

<sectionclass="hero"style="--bg-url: url('landscape.jpg')">  <!-- 内容区域 --></section>

现在,我们可以通过更新--bg-url变量来更换背景图,这看起来比内联 CSS 好多了。

对于这个解决方案,主要适用于以下情况:

  • 图像不重要,可有可无。
  • 图像不会动态修改,而是固定的。

(2)解决方案-2

下面再来看看第二个解决方案:使用 img 标签。

html

复制代码

<section class="hero">
  <h2 class="hero__title">CSS背景图和 img 标签怎么选?</h2>
  <p class="hero__desc">文章简介......</p>
  <img src="landscape.jpg" alt="">
</section>

在 CSS 中,需要将图像绝对定位在内容的下方,并且还需要一个伪元素作为遮罩。

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);
}

这个解决方案的好处就是很容易更改图像的src属性。此外,如果图像很重要,这个方案就更合适。除此之外,使用HTML<img>可以在图像未加载的情况下添加回退功能。这种回退至少可以保持内容可读。

css

复制代码

.heroimg {
    background: #2962ff;}

网站 Logo

(1)细节多的 Logo

对于网站的 Logo,当一有很多细节或形状时,将其用作内联 SVG 可能不太好。建议使用**<img>**,图像文件类型可以是pngjpgsvg

html

复制代码

<ahref="#"><imgsrc="logo.svg"alt="Nature Food"></a>

(2)带动画的 Logo

有一个简单的 Logo,有一个形状和文字组成。当鼠标悬停在Logo上时,需要改变 Logo 的颜色。这时最合适的方案就是使用内联 SVG。

html

复制代码

<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>
css
复制代码
.logo rect,
.logo text {
  transition: 0.3s ease-out;
}
.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

(3)响应式的 Logo

所谓的响应式 Logo 就是在不同视口下,显示的 Logo 不一样。例如下面的 Logo:当视口的宽度超过 1350px 时就显示右边的 Logo,否则就显示左边的 Logo。

这里比较完美的解决方案就是<picture>元素,它可以添加两个版本的 Logo :

css

复制代码

<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>

在 CSS 中,需要将视口的宽度更改为等于或大于1350px:

css

复制代码

.logo {
  display: inline-block;
  width: 45px;
}
@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

轻松结局~

(4)带渐变的 Logo

当有一个带渐变色的 Logo 时,可以使用 SVG 来轻松实现渐变色。

<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>

这里添加了一个<linearGradient>,并将其作为 textfill 属性,轻松实现了带渐变色的 Logo。

页面打印

如果用户需要打印页面,需要避免将图像作为CSS的背景,因为背景图不会被打印,而会显示一个空白区域:不过,我们可以通过强制浏览器显示图像来解决这个问题(不适用于 Firefox 和 IE):


.element {
    background: url('cheesecake.png') center/cover no-repeat;    -webkit-print-color-adjust: exact;}

对于这种情况,使用 HTML <img> 标签会更安全,因为它可以完美地打印出来。


相关文章
|
20天前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
85 49
|
14天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
30 7
|
14天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
27 6
|
14天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
29 5
|
14天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
21 5
|
28天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
51 12
|
24天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
104 1
|
7月前
|
前端开发
HTML基本标签使用详解
HTML基本标签使用详解
|
数据采集 前端开发 JavaScript
【 ⑤】HTML概述与基本标签详解
【 ⑤】HTML概述与基本标签详解
52 0