前端开发中如何将文件夹中的图片变为背景图_Web中的图像技术全面总结,长文干货!...

前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ,也可以是通过CSS背景生成的图片,也可以是SVG 。选择正确的技术很重要,并且可以在性能和可访问性方面发挥巨大作用。

f647b91f31c18a93b01e851c9ceced00.png

最简单的情况下,图片元素必须包含 src 属性。

1.1 设置宽度和高度属性

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

虽然对某些人来说,这可能看起来有点过时,但它是有用的。让我们用图片来清楚地理解这个概念:

db5942562e9010e546663afa279bd9ff.gif

你注意到了吗,右边的图片即使还没有加载也会保留其空间吗?这是因为宽度和高度已经设置好了。它有明显的区别!

1.2 用CSS隐藏图片

可以用CSS隐藏图片,但是它仍然会被加载到页面中。因此,在执行此操作时请小心,如果一个图片应该被隐藏,那么它可能是出于装饰的目的。

img {  display: none;}

同样,以上内容也不会阻止浏览器加载图片,即使该图片在视觉上是隐藏的。原因是 被视为替换元素,因此我们无法控制其加载的内容。

1.3 可访问性问题

HTML图片应该通过将 alt 属性设置为有意义的描述来访问,这对屏幕阅读器用户来说是非常有帮助的。

但是,如果不需要 alt 描述,请不要删除,如果删除了就会读出图片的src!这对可访问性(无障碍)环境是非常不利的。

不仅如此,如果图片因为某种原因没有加载,并且它有一个明确的 alt,它将作为一个备用值回退显示。既然有一些有趣的事情我想让大家知道,那我们就从视觉上说说吧。

我们有以下图片:

src 无效,图片没有正常加载。第一个没有 alt 属性,而第二个是空的 alt 属性。你能期待这个视觉效果吗?

8ee37246d1497c87e5cc20181c56aced.png

没有 alt 的图片仍然保留其空间,这很混乱,并且对可访问性不利。虽然另一个折叠了,以适应其空的 alt 属性的内容,但由于它的边框,导致了它作为一个小点出现。

但是,当存在 alt 属性值时,它将如下所示:

3de78dbb4e75caf4d38e6456752cf715.png

这不是很好的反馈吗?另外,当图片源发生故障时,可以向其中添加伪元素。

1.4 响应式图片

ce90907f36854af98fcf3fc348d47d56.png

的优点在于,可以针对特定视口大小将其扩展为具有多个版本的图片。例如,这可用于商品图片。

我们有两种不同的方式来生成一组响应式图片:

srcset 属性

这是一个简单的例子。对我来说,我不认为使用 srcset 是根据屏幕宽度显示多个图片大小的完美解决方案。只能让浏览器选择合适的图片,而我们对此无能为力。

HTML Picture 元素

另一种选择是使用 元素。我更喜欢这种方式,因为它更容易预测。

1.5 调整图片的大小

bb4cdec6516d115ba6dcc78a7a3f685a.png

我们可以使用 的一大优点就是 object-fit object-position 属性。它们让我们可以控制 的内容如何调整大小和位置,就像CSS背景图片一样。

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

可以这样使用:

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

现在,我们已经介绍了 元素,是时候继续探索第二种技术了。

44e7e5ca5666c4221a3a533cb58fb36b.png

当使用CSS背景显示图片时,它需要一个具有内容或特定宽度或高度的元素。通常,背景图片的主要用途应该是用于装饰目的。

2.1 如何使用CSS背景图片

简单来说,我们需要一个元素。

Some content
.element {  background: url('cool.jpg');}

2.2 多背景

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

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

2.3 隐藏图片

我们可以在特定的视口上隐藏和显示图片,而不会让图片被下载。如果图片没有用CSS设置,就不会被下载。这是比使用 更多的好处。

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

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

2.4 可访问性问题

如果使用不正确,背景图片会对无障碍浏览不利。例如,将其用于文章的大拇指,这对文章至关重要。

2.5 非开发人员无法下载

你可能会觉得很有趣,但是普通人知道,如果要保存图像,只需单击鼠标左键,然后选择保存即可。CSS背景图片并非如此。您必须先检查元素,然后在DevTools中的 url 中打开链接,然后才能下载随CSS添加的图像。

2.6 伪元素

可以使用伪元素与CSS背景图片一起使用,例如,在图片的顶部显示一个叠加元素。对于 来说,除非我们为覆盖层添加一个单独的元素,否则无法做到这一点。

ee4e741274f35dc9b01f107bec711d5f.png

SVG被认为是图像,它的最大功能在于缩放而不影响质量。另外,使用SVG,我们可以嵌入 JPGPNGSVG 图像。请参见下面的HTML:

13e5a1f67c54059905d4696641fcc02a.png

你是否注意到了 prepareAspectRatio?这样一来,可以使图像占据SVG的整个宽度和高度,而不会被拉伸或压缩。

宽度较大时,它将填充其父级(SVG)宽度而不会拉伸。

226f30300541b6059dcb218babc84503.png

这非常类似于CSS中的 object-fit:cover background-size:cover。

2.7 可访问性问题

关于SVG的可访问性,这使我想起了 元素。例如,我们可以像下面这样添加它:

A photo of blueberry Cheescake

我们甚至可以使用 元素:

A photo of blueberry CheescakeA meaningful description about the image

2.8 非开发人员无法下载

在检查元素并复制图像的URL之前,不可能下载嵌入到SVG中的图像。然而,如果我们想要阻止用户下载特定的图像,这可能是一件好事。至少,它将减少下载图像的机会很容易。

458b9e27f823ecc6f7f723492800cbf4.png

4.1 Hero Section

在构建 hero section 时,我们有时需要在标题和其他内容下面有一个图像。如下图所示:

260cddaab210e0ce490dff2309c1f79c.png

注意这里有一个图像。你将如何构建它?好吧,让我先补充一些要求:

  • 在与后端CMS整合时,图片应该是很容易动态变化的。
  • 其上方有一个覆盖层,有助于使内容易于阅读。
  • 图像有三种尺寸:小、中和大。它们每个都用于特定的视口。

在开始解决方案之前,让我们先问问自己这种背景的性质。这是一些入门问题:

  1. 为用户保留这个图像很重要吗,还是可以跳过它?
  2. 我们是否需要在所有视口尺寸上使用它?
  3. 它是静态的还是动态变化的?

Hero - 解决方案1

通过使用多个CSS背景,我们可以将一个背景作为叠加层,将另一个背景作为实际图像。请参阅下面的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;}

虽然此解决方案有效,但可以使用JavaScript动态更改背景图片。见下面:

我添加了一个内联的CSS背景。虽然这是可行的,但它看起来很丑,而且不实用。

也许我们可以使用CSS变量?让我们来探索一下。

52de15c3df6a370cf1303302519457a7.png

现在,我们可以轻松地更新 --bg-url 变量,这将动态更改背景。这比内联的CSS好一百万倍。

解决方案1要点:

  1. 解决方案只有在图像不重要的情况下才是好的
  2. 当无法从后端CMS动态更改图片时

Hero - 解决方案2

对于此解决方案,我们将使用HTML图像。见下面:

Using Images in CSS

An article about which and when to use

在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 的地方是可以在图片没有加载的情况下添加一个回退方法,这个回退至少可以保持内容的可读性。

.hero img {  /* 其他样式 */  background: #2962ff;}
ee846ad2f31673a62d768b113072973f.png

好处是,只有在图像源失败的情况下,背景才会起作用。那不是很酷吗?

4.2 网站Logo

Logo是很重要的,因为它可以将网站与其他网站区分开。要嵌入Logo,我们有两种选择:

--> png,jpg,或者 svg内联SVG背景图像

让我们学习使用哪种技术以及如何选择合适的技术。

带有详细信息的Logo

当一个LOGO有很多细节或形状时,用内嵌式SVG可能没有那么多好处。我建议使用 ,图片类型可以是png、jpg svg

9a4791a07405983a60ee62bfbe8c45ac.png

一个需要动画的简单Logo

a0a1cfea7fb23e1551c9032b7a01ad2c.png

我们有一个简单的Logo,其中包含形状和文字。悬停时,形状和文本需要更改颜色。怎么做?对我来说最好的解决方案是使用内联SVG。

  Rect
.logo rect,.logo text {  transition: 0.3s ease-out;}.logo:hover rect,.logo:hover text {  fill: #4a7def;}

响应式Logo

这让我想起了Smashing Magazine的Logo,我喜欢它从一个小图标变成一个完整的Logo。参见下面的模型:

493663168568ab529f0ac50f6b2f3dec.png

完美的解决方案是 元素,可以在其中添加Logo的两个版本。见下文:

  

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

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

简单明了的解决方案。

渐变Logo

0060675b1372a70e243018a9a548b8fc.png

当Logo具有渐变时,从Illustrator或Sketch等设计应用程序将其导出的过程可能并不完美,有时会中断。

使用SVG,我们可以轻松地为徽标添加渐变,我添加了 并将其用作文本填充。

Rect

4.3 用户头像

对于用户头像,它们有很多形状,但最常见的是矩形或圆形。在这个用例中,我很有兴趣解释一个你可能会觉得有用的重要技巧。

首先,我们来看看下面的模拟图。注意,我们有一个完美的头像,而且它们是100%的清晰。

5f9ecc71e808b6e853e21348595651f6.png

但是,当用户上传半白色头像或非常浅的头像时,此设计将失败。

fe3f7c2a4a6688a15b4ad2f379b8735d.png

注意到上面的模拟图中,你要真的聚焦好了才知道里面有一个圆形。这就是一个问题,为了解决这个问题,我们应该在头像内部添加一个边框,这将是在图像太亮的情况下作为备用。

071198d30adaac1d2ae985ee630aa40c.png

我们有两种选择可以做到这一点:

  • 元素
  • 具有
  • 具有CSS背景的
  • SVG

其中哪一个最好?让我们来探索。

使用 HTML

您可能想到的第一件事就是添加边框,对吗?让我们来探讨一下(很抱歉,在下面的部分中,您可能会看到很多我的脸)。

.avatar {  border: 2px solid #f2f2f2;}
aed8b52882afe12edbfb56db3e5c8777.png

我们的目标是要有一个与图像相融合的内部边框,具有实边是不实际的。

使用具有

现在的问题是,要添加内边框,我们不能使用内部 box-shadow,因为它对图像不起作用。解决的方法是用

包裹头像,并添加一个专门用于内边框的元素。
.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);}

通过在

上设置一个10%的黑色边框,我们可以确保边框与暗色图像融合,只有在图像颜色较浅的情况下,边框才会显现出来。请看下面的模拟图。
fecceb42010897389a3856792534bd22.png

具有CSS背景的

如果我要使用

来显示头像,则可能表示该图像具有装饰性。我记得一个用例,它是分散在页面中的随机头像。
9f0a27477b9fcc1b1ef222fb7520a2cf.png

我们可以有这样的东西:

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

SVG

对我来说,这是最有趣的解决方案。我在检查Facebook的新设计时注意到了它。

我先对其进行剖析,它包含以下内容:

用于将图像剪切为圆形的蒙层对其应用了蒙层的group图像本身带有 preserveAspectRatio = "xMidYMid"用于内边框的圆圈

在CSS中,我们将具有以下内容:

circle {  stroke-width: 2;  stroke: rgba(0, 0, 0, 0.1);  fill: none;}

这就是用户头像用例的全部内容。

4.4 带图标的输入框

1777a2df265cbe040225957b2d165471.png

通常会看到带有图标的输入框,如何添加?当输入被聚焦时会发生什么?让我们来探索一下。

Full name

对我来说,处理这种情况的最佳解决方案是CSS背景图片。简单,快捷,不需要添加更多元素。

input {  background-color: #fff;  background-image: url('user.svg');  background-size: 20px 20px;  background-position: left 10px center;  background-repeat: no-repeat;}

要更改焦点上的图标颜色,我们可以使用url编码的SVG,并且很容易做到这一点。Yoksel的这个工具很棒。

4.5 CSS 打印

用户可能需要打印web页面。假设我们有一份食谱,你想把它打印出来,这样你就可以在厨房里看它,而不需要查看你的手机或电脑。

对于包含说明性步骤的菜谱,重要的是将它们打印出来,否则用户将无法从打印web页面中获得任何好处。

避免使用图像作为CSS背景

当一个图像作为CSS背景被包含进来时,它不会被打印出来,取而代之的是一个空白区域。如下图所示:

41e7a1b3ebe11a0a11a7b65391c93099.png

就是这样的情况。我们可以通过强制浏览器显示图片来解决这个问题,虽然这对Firefox和IE来说不起作用。

.element {  background: url('cheesecake.png') center/cover no-repeat;  -webkit-print-color-adjust: exact; /* 强制浏览器以打印模式呈现背景 */}

但是,使用HTML 会更安全,因为它可以打印而不会出现任何问题。

全文完。

如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

作者简介:Web前端工程师,全栈开发工程师、持续学习者。

私信回复大礼包送某网精品视频课程网盘资料,准能为你节省不少钱!

#科技青年# #432头条知识节#

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/469147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Pytorch神经网络实战案例】33 使用BERT模型实现完形填空任务

1 案例描述 案例:加载Transformers库中的BERT模型,并用它实现完形填空任务,即预测一个句子中缺失的单词。 2 代码实现:使用BERT模型实现完形填空任务 2.1 代码实现:载入词表,并对输入的文本进行分词转化--…

container_of宏

1.container_of宏 1> Container_of在Linux内核中是一个常用的宏,用于从包含在某个结构中的指针获得结构本身的指针,通俗地讲就是通过结构体变量中某个成员的首地址进而获得整个结构体变量的首地址。 2>接口: container_of(ptr, type, …

c++ string 删除字符_字符串操作的全面总结

来自公众号:C语言与cpp编程字符串操作看似简单,其实非常重要,不注意的话,经常出现代码运行结果和自己想要的不一致,甚至崩溃。本文总结了一些构建string对象方法、修改string对象的方法、string类型的操作函数、string…

【Pytorch神经网络理论篇】 40 Transformers中的词表工具Tokenizer

同学你好!本文章于2021年末编写,获得广泛的好评! 故在2022年末对本系列进行填充与更新,欢迎大家订阅最新的专栏,获取基于Pytorch1.10版本的理论代码(2023版)实现, Pytorch深度学习理论篇(2023版)目录地址…

warning: function declaration isn’t a prototype(函数声明不是原型)的解决办法

linux驱动中定义一个无参的函数int probe_num(){....}警告:函数声明不是一个原型 [-Wstrict-prototypes]应对方法:改成int probe_num( void){....}警告消失 http://blog.csdn.net/dumgeewang/article/details/7410477

【Pytorch神经网络实战案例】34 使用GPT-2模型实现句子补全功能(手动加载)

1 GPT-2 模型结构 GPT-2的整体结构如下图,GPT-2是以Transformer为基础构建的,使用字节对编码的方法进行数据预处理,通过预测下一个词任务进行预训练的语言模型。 1.1 GPT-2 功能简介 GPT-2 就是一个语言模型,能够根据上文预测下…

电容式传感器位移性能试验报告_一文读懂什么是接近传感器?

点击上方蓝字 记得关注我们哦!接近传感器是一种非接触式传感器,当目标进入传感器的视野时,它会检测到物体(通常称为“目标”)的存在。取决于接近传感器的类型,传感器可以利用声音,光,红外辐射(IR)或电磁场来…

[dts]DTS实例分析

2. 通常会碰到的实际问题 到此,问题出现了: 1. 当写一个按键驱动,应该如何在*.dts或者*.dtsi中操作? 2. 当在串口driver中需要使用到某个pin脚作为普通输出IO,该如何操作? 3. 当在串口driver中需要使用某个muxpin脚作…

【解决】YOLOv6.1安装requirements.txt报错UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0x84

案例描述: 使用YOLOV5时,报错解决UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0x84 in position 285: illegal multibyte sequence 解决方案: 在C:\ProgramData\Anaconda3\lib\distutils\dist.py"文件搜索read 将parser.read(filenam…

bp 神经网络 优点 不足_深度学习之BP神经网络--Stata和R同步实现(附Stata数据和代码)

说明:本文原发于“计量经济圈”公众号,在此仅展示Stata的部分。R部分请移步至本人主页的“R语言与机器学习--经济学视角”专栏,或点击下方链接卡跳转。盲区行者:深度学习之BP神经网络--Stata和R同步实现(附R数据和代码…

高通平台中gpio简单操作和调试

做底层驱动免不了gpio打交道,所以对其操作和调试进行了一下简单的梳理 一、gpio的调试方法 在Linux下,通过sysfs,获取gpio状态,也可以操作gpio。 1、获取gpio状态 cd /sys/kernel/debug/ cat gpio 2、操作gpio(以gpi…

Win10系统下使用anaconda在虚拟环境下安装CUDA及CUDNN

前排预警:不要挂梯子!!!!!使用清华源就行不然报错!!!! 解决check_hostname requires server_hostname_orange_の_呜的博客-CSDN博客错误描述在GitHub下载代码文件后使用pip install -r requirement.txt下载依赖包时出…

jlink问题

现在淘宝上买到的JLINK都是盗版的,用着用着的时候就会遇到各种异常问题, 这里有一个方法来修改SN,修改SN后就会变得正常了,亲测有效 两种固件: V*_ID-自定义.* 是出厂设置,烧入后用jlink.exe连接上S/N会显示-1. 此时可以根据自己的…

将XML格式转化为YOLO需要的txt格式(代码)

1、XML的格式 <annotation><folder>cr</folder><filename>crazing_2.jpg</filename><source><database>NEU-DET</database></source><size><width>200</width><height>200</height><…

js 点击button切换颜色_ThingJS 和three.js开发示例对比,让开发早点下班回家!3D 可视化...

ThingJS 3D框架简化了开发工作&#xff0c;面向对象和模块化的特点使得网页代码更加易于管理和维护&#xff0c;并且提供近200个官方示例&#xff0c;直接获取API能力&#xff0c;不需要基于3D概念进行开发&#xff0c;适合3D商业项目快速生成&#xff01;距离您的业务仅一层之…

变量命名

列举一下我自己的一些写法 local_int_loop_count global_int_data_count local_bool_plug_insert_flag global_bool_ble_connect_flag函数命名 get_tick_number set_tick_number为了代码清晰易懂&#xff0c;通常变量名采用一些著名的命名规则&#xff0c;主要有Camel标记法&am…

VSCode使用技巧——Ctrl+鼠标滚轮键使字体进行缩放

点击VSCode左下角的齿轮&#xff0c;进入设置 进入Extensions——》JSON——》Edit in settings.json 在json当中添加如下&#xff1a; "editor.mouseWheelZoom": true,

python 交互式可视化库_Python 交互式可视化库

Python 交互式可视化库 所属分类&#xff1a;中间件编程 开发工具&#xff1a;Python 文件大小&#xff1a;12843KB 下载次数&#xff1a;1 上传日期&#xff1a;2018-12-06 18:40:56 上 传 者&#xff1a;孤独的老张 说明&#xff1a; 一个 Python 交互式可视化库&#xff0c;…

OpenCV各版本差异与演化,从1.x到4.0

最近因项目需要&#xff0c;得把OpenCV捡起来&#xff0c;登录OpenCV官网&#xff0c;竟然发现release了4.0.0-beata版本&#xff0c;所以借此机会&#xff0c;查阅资料&#xff0c;了解下OpenCV各版本的差异及其演化过程&#xff0c;形成了以下几点认识&#xff1a; 新版本的…

python题库刷题训练软件_Python基础练习100题 ( 11~ 20)

刷题继续 上一期和大家分享了前10道题&#xff0c;今天继续来刷11~20 Question 11: Write a program which accepts a sequence of comma separated 4 digit binary numbers as its input and then check whether they are divisible by 5 or not. The numbers that are divisi…