如何使用 `PostCSS` 在样式表中处理图片

原文链接： https://css-tricks.com/images-in-postcss

本文摘自guest网Aleks Hudochenkov。Aleks 在这里给我们展示了POSTCSS在前端开发中，所擅长的领域。

也就是，越少的去用CSS。你即将看到各种与处理图像的PostCSS插件。最后，我敢肯定你能够想像POSTCSS在CSS中的重要性。

我们平时也一直在用CSS处理图片。但我们甚至可能没有意识到这一点，如果我们能替代手工操作的话，那很多事情就会容易很多 。我将为你展示很多POSTCSS的插件，尤其是在处理图片上。

本文所介绍的每个插件在任何可以解析PostCSS语法- CSS，SCSS，Less ，以及使用POSTCSS语法创建的插件中都可以使用。我不会介绍如何使用PostCSS本身，因为已经有一个很好的文章德鲁Minns。

让我们现在开始看案例吧。

图片助手

postcss-assets插件几乎是用于处理图像的必备插件。它有很多功能。

内联图像

有时候，我们的样式表内将图像做成数据的URL方式是很有用的。减少了一个HTTP请求！

/* input.css */
div {
  background: inline("images/logos/postcss.png");
}

/* output.css */
div {
  background: url("data:image/png;base64,iVBORw0KGgoAAAA...ggg==");
}

计算维度

有时你需要元素的大小或根据你所使用的图像的尺寸大小来决定背景尺寸。根据需要，这个插件可以使将尺寸测量并输出。

/* input.css */
body {
  width: width("images/foobar.png");
  height: height("images/foobar.png");
  background-size: size("images/foobar.png");
}

/* output.css */
body {
  width: 320px;
  height: 240px;
  background-size: 320px 240px;
}

如果我们处理的是二倍图，我们可以通过传递第二个参数输出：

/* input.css */
body {
  width: width("images/foobar.png", 2);
  height: height("images/foobar.png", 2);
  background-size: size("images/foobar.png", 2);
}

/* output.css */
body {
  width: 160px;
  height: 120px;
  background-size: 160px 120px;
}

URL解析

该插件可以自动补全文件路径。我们并不需要知道完整路径图像。只要知道文件名就可以了。

例如，我们有这样的文件夹结构：

images/
 logos/
  postcss.png
input.css

我们传这样的一个参数。** 表示当前路径下所有文件夹和文件进行搜索。

postcss([
  require(‘postcss-assets‘)({
   loadPaths: [‘**‘]
  })
])
/* input.css */
div {
  background: resolve("postcss.png");
  background: resolve("logos/postcss.png");
}

/* output.css */
div {
  background: url("/images/logos/postcss.png");
  background: url("/images/logos/postcss.png");
}

缓存无效

这个插件可以使图片缓存失效。

postcss([
  require(‘postcss-assets‘)({
    cachebuster: true
  })
])
/* input.css */
div {
  background: url("images/logos/postcss.png");
}

/* output.css */
div {
  background: url("images/logos/postcss.png?153bd5d59c8");
}

内联和修改SVGs

几乎每一个图形我最近处理的都是SVG。这是处理任何像素密度图像的一种格式。更妙的是，它的语法是文本，这意味着我们可以对其进行编辑，而不需要用沉重的工具，如图形编辑程序。

这里有内联SVGs插件：postcss-inline-svg.。你可能会问，为什么我们需要它，postcss-assets插件已经可以做到这一点了。原因是postcss-inline-svg有一个杀手锏：它可以修改SVG。

比如说在一个网站里，我们在十个不同的地方使用了不同颜色的星形图标。有很多方法可以做到这一点。我们可以使用一个inline SVG system<symbol></symbol> 或者 <use>。又或者，我们可以使用CSS背景属性！

在CSS中使用图像有两种方式。1）url(/path/to/image.jpg) 传文件路径 2）url(data:...)数据URL。后者有时也被称为“内联”图像，完成的图像精灵的主要优势之一：结合HTTP请求。有了postcss-inline-svg，我们可以这样做（让我们的CSS精灵图像），单独调整颜色：

/* input.css */
.star--red {
  background-image: svg-load("img/star.svg", fill=#f00);
}
.star--green {
  background-image: svg-load("img/star.svg", fill=#0f0, stroke=#abc);
}

/* output.css */
.star--red {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill=‘%23f00‘%3E...%3C/svg%3E");
}
.star--green {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill=‘%230f0‘ stroke=‘%23abc‘%3E...%3C/svg%3E");
}

你觉着，这样输出的CSS文件是太大了？输出CSS将更大，是因为代码重复，但它并没有用Gzip压缩的事！为了证明，我做了一个测试。我一个CSS文件写了100个不同的选择器，并在每规则集与随机颜色的添加图标内嵌填。像这样：

.wibcsidpuaeqgbxvcjqq {
  background: svg-load("images/star.svg", fill: #8c0);
}

我创建了一个副本，删除了??所有内嵌图片的背景。以下是文件大小的对比结果：

– Original size Gzipped
With 100 images 48500 bytes 2560 bytes
With 1 image 3158 bytes 1817 bytes

区别：2560 – 1817 = 743 bytes

差别不是很大！

这种方法的唯一区别是：没有办法为图片添加动画。例如，如果悬停的时候，颜色有过渡动画，就实现不了。因为transition不能被应用到background-image属性上。

这些插件互相恭维

实际案例：我们需要一个按钮是一个图标。按钮内的图像需要一个特定的图像大小，也需要改变悬停颜色。只有一个源SVG文件。

标记：

<button type="button" class="delete">Delete</button>

在没有任何帮助的情况下，我们可能会这样做：

.delete {
  box-sizing: content-box;
  padding: 15px;

  /* Values based on this particular image */
  width: 26px;
  height: 32px;

  border: 1px solid #ef5350;
  border-radius: 3px;
  background: #fff url("images/trash.svg") 50% 50% no-repeat;
  text-indent: -9999px;
}
.delete:hover {
  border-color: #c62828;

  /* Manually duplicate file and change things */
  background-image: url("images/trash-hover.svg");
}

用postcss-assets自动化后，我们可以这样做：

postcss([  require(‘postcss-inline-svg‘)(),  require(‘postcss-assets‘)()]);
.delete {
  box-sizing: content-box;
  padding: 15px;
  width: width("images/trash.svg");
  height: height("images/trash.svg");
  border: 1px solid #ef5350;
  border-radius: 3px;
  background: #fff svg-load("images/trash.svg", fill=#ef5350) 50% 50% no-repeat;
  text-indent: -9999px;
}
.delete:hover {
  border-color: #c62828;
  background-image: svg-load("images/trash.svg", fill=#c62828);
}

输出：

.delete {
  box-sizing: content-box;
  padding: 15px;
  width: 26px;
  height: 32px;
  border: 1px solid #ef5350;
  border-radius: 3px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=‘http://www.w3.org/2000/svg‘ width=‘26‘ height=‘32‘ viewBox=‘12 8 26 32‘ fill=‘%23ef5350‘%3E%3Cpath d=‘M20 18h2v16h-2z‘/%3E%3Cpath d=‘M24 18h2v16h-2z‘/%3E%3Cpath d=‘M28 18h2v16h-2z‘/%3E%3Cpath d=‘M12 12h26v2H12z‘/%3E%3Cpath d=‘M30 12h-2v-1c0-.6-.4-1-1-1h-4c-.6 0-1 .4-1 1v1h-2v-1c0-1.7 1.3-3 3-3h4c1.7 0 3 1.3 3 3v1z‘/%3E%3Cpath d=‘M31 40H19c-1.6 0-3-1.3-3.2-2.9l-1.8-24 2-.2 1.8 24c0 .6.6 1.1 1.2 1.1h12c.6 0 1.1-.5 1.2-1.1l1.8-24 2 .2-1.8 24C34 38.7 32.6 40 31 40z‘/%3E%3C/svg%3E") 50% 50% no-repeat;
  text-indent: -9999px;
}
.delete:hover {
  border-color: #c62828;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=‘http://www.w3.org/2000/svg‘ width=‘26‘ height=‘32‘ viewBox=‘12 8 26 32‘ fill=‘%23c62828‘%3E%3Cpath d=‘M20 18h2v16h-2z‘/%3E%3Cpath d=‘M24 18h2v16h-2z‘/%3E%3Cpath d=‘M28 18h2v16h-2z‘/%3E%3Cpath d=‘M12 12h26v2H12z‘/%3E%3Cpath d=‘M30 12h-2v-1c0-.6-.4-1-1-1h-4c-.6 0-1 .4-1 1v1h-2v-1c0-1.7 1.3-3 3-3h4c1.7 0 3 1.3 3 3v1z‘/%3E%3Cpath d=‘M31 40H19c-1.6 0-3-1.3-3.2-2.9l-1.8-24 2-.2 1.8 24c0 .6.6 1.1 1.2 1.1h12c.6 0 1.1-.5 1.2-1.1l1.8-24 2 .2-1.8 24C34 38.7 32.6 40 31 40z‘/%3E%3C/svg%3E");
}

如果图像变化，你不需要做任何事情！postcss-assets会自动更新大小。需要更改颜色？如果您使用另一个插件或预处理器，你甚至可以定义成变量。

精灵

目前你可能想用那种图片精灵，所有的图片组合在一起成一个较大的图像。首先，众所周知，手机解码内嵌图像比普通图像稍微慢一些。

有很多的工具，可以生成图片精灵。例如：grunt-spritesmith。

这些工具都是很强大的，不是特别容易或方便安装。就像grunt-spritesmith这个，你需要了解它的模板引擎是如何工作的。

但postcss-sprites就方便的多。这是它的工作原理：

/* input.css */
.comment {
  background-image: url("images/sprite/ico-comment.png");
}
.bubble {
  background-image: url("images/sprite/ico-bubble.png");
}

/* output.css */
.comment {
  background-image: url("images/sprite.png");
  background-position: 0 0;
}
.bubble {
  background-image: url("images/sprite.png");
  background-position: 0 -50px;
}

它查找在CSS中每个图像（可能是过滤），创建一个`Sprite，并输出正确的背景位置到那里。

为高清屏处理图像精灵

尽管postcss-sprites支持高清屏图片，它并不完全给你处理过程。例如，它不给你媒体查询在高清屏实际使用的那些图像。这个问题可以用另一个PostCSS插件来解决。这是PostCSS生态之美 - 有许多插件，每个只做一项工作，你可以结合他们去解决更复杂的问题。

有一个postcss-at2x插件，它增加了高清屏幕的媒体查询。让我们结合这些插件生成普通屏和高清屏精灵。

postcss([
  require(‘postcss-at2x‘)(),
  require(‘postcss-sprites‘).default({
    retina: true
  })
]);
/* input.css */
.circle {
  background-image: url("images/circle.png") at-2x;
}
.square {
  background-image: url("images/square.png") at-2x;
}

/* output.css */
.circle {
  background-image: url("sprite.png");
  background-position: 0px 0px;
}
.square {
  background-image: url("sprite.png");
  background-position: -25px 0px;
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .circle {
    background-image: url("[email protected]");
    background-position: 0px 0px;
    background-size: 50px 25px;
  }
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .square {
    background-image: url("[email protected]");
    background-position: -25px 0px;
    background-size: 50px 25px;
  }
}

创建动态图片

有时候我们需要非常简单的图像（如几何形状），但仍然发现自己打开一个图形编辑器，创建图像，导入它，把它在正确的地方，对其进行优化，并在CSS中使用它。那我们能不能在CSS里创建简单的图片？我敢打赌，你一定会说：我们可以！

postcss-write-svg可以让你在CSS里创建简单的SVG图像。刚刚描述SVG元素，它会被内联作为background-image。

/* input.css */
@svg square {
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 100%;
  }
  @polygon {
    fill: green;
    points: 50,100 0,0 0,100;
  }
}

#example {
  background: white svg(square param(--color #00b1ff));
}

/* output.css */
#example {
  background: white url("data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg‘%3E%3Crect fill=‘%2300b1ff‘ width=‘100%25‘ height=‘100%25‘/%3E%3Cpolygon fill=‘green‘ points=‘50%2C100 0%2C0 0%2C100‘/%3E%3C/svg%3E");
}

还有其他的插件，只有CSS属性，实现圆和三角形。你可以用CSS直接实现三角形，但它的不全面，当你想要做不同类型的三角形变得更难了。postcss-triangle允许您轻松地创建等腰三角形，等腰和等边三角形。

/* input.css */
.isosceles-triangle {
  triangle: pointing-right;
  width: 150px;
  height: 115px;
  background-color: red;
}
.right-isosceles-triangle {
  triangle: right-iso pointing-down;
  width: 250px;
  background-color: red;
}
.equilateral-triangle {
  triangle: equilateral pointing-up;
  height: 100px;
  background-color: red;
}

/* output.css */
.isosceles-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 57.5px 0 57.5px 150px;
  border-left-color: red;
}
.right-isosceles-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 125px 125px 0;
  border-top-color: red;
}
.equilateral-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0 57.73503px 100px;
  border-bottom-color: red;
}

圈更容易，postcss-circle可以节省你的几行代码，并增强可读性。

/* input.css */
.circle {
  circle: 100px red;
}

/* output.css */
.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

缓存无效

假设你需要更新样式表里的图像链接。我们可能会遇到一个问题，如果我们使用的缓存日期还要很久才到期，用户的浏览器该图像是挂在缓存中的。解决办法是，强迫用户的浏览器去下载的新版本（缓存无效）。有两种方法可以做到这一点：改变文件名或更改URL。更改文件名有很多要求，但改变URL参数是容易的。

以下是postcss-urlrev如何改变URL

/* input.css */
.foo {
  background: url("images/test.png") 0 0 no-repeat;
}

/* output.css */
.foo {
  background: url("images/test.png?v=e19ac7dee6") 0 0 no-repeat;
}

这个任务还可以用 postcss-cachebuster and postcss-assets

公用组件

PostCSS插件可以帮助优化样式表。例如postcss-svgo可以用 SVGO优化内联SVG，最好的SVG优化工具。

如果您仍然需要支持不支持SVG的浏览器，postcss-svg-fallback可以帮助你。这个插件在你的CSS将SVG回退PNG（包括内联，和外联链接URL（） ），为旧浏览器增加了额外的规则。

内联图像可能使CSS臃肿，但有一个解决方案：postcss-data-packer可以提取 Data URL到一个单独的文件。然后，您就可以异步加载该文件，以减少网页加载时间。

结论

在没有PostCSS之前，我们做了很多繁琐的手工工作：复制和粘贴的事情，或者手工计算。现在，我们可以使用一些PostCSS插件，使我们的电脑为我们做这些事情。它加快了我们的工作，使我们成为更快乐的人。

时间： 2025-01-14 14:23:55

如何使用 `PostCSS` 在样式表中处理图片的相关文章

css样式表中设置table的第一列的宽度是固定值

table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的宽度都会和他一样. *注意 第一行 第一个用的是 td 还是 th css样式表中设置table的第一列的宽度是固定值,布布扣,bubuko.com

css样式表中的样式覆盖顺序(转)

转自:http://spartan1.iteye.com/blog/1526735 有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中(w3schools等),只说css的

Andriod React Native 样式表中可用样式属性

写了这么多篇Android React Native的博文,基本上把复杂的东西都搞定了,接下来来看看一些轻松的东西,和布局有关,就是css样式,那么一个View可以设置哪些css样式呢,是和web中的css样式完全一样呢,还是有所不同呢?其实你只要在样式表中书写一个不存在的样式,就会报一大堆错,提示你该样式不存在,然后提供所有可用的样式给你,如图 下面的样式就是样式表中所有可用的属性. "alignItems", "alignSelf", "backfac

css样式表中四种属性选择器

css样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new"> 2>精确属性值 a[href="http://www.cnblogs.cn"][title="textTitle"]{fon

css样式表中的样式覆盖顺序

css样式表中的样式覆盖顺序 - - ITeye技术网站http://spartan1.iteye.com/blog/1526735 重点归纳: 查找一些教材中(w3schools等),只说css的顺序是“元素上的style”>“文件头上的style元素”>“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明.经过测试和继续搜索,得知优先级如下排列: 或者以下也可以称之为一些优先原则(by liwei 20140803) 1.样式表的元素选择器选择越精确,则其中的样式

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

样式表中的样式及其布局常用标签

样式表中的样式及其布局1.大小:width宽度,height高度.2.背景:backgrpund-color,backgrpund-image,backgrpund-repeat,backgrpund-position,backgrpund-attachment,backgrpund-size.3.字体:font-family,font-size,font-style,font-weight,text-decoration:(underline,overline,lin-through,none

在XSLT样式表中插入VBScript脚本进行数学计算

继上次我写了篇文章<在XSLT样式表中使用莱布尼兹级数计算π的近似值>后,我发现在XSLT中使用模板的递归调用,有下面两个缺点:1)易读性差,有失灵活:2)效率低下.因此,我又想了一个新的策略实现在XSLT中的一些复杂的计算工作,这就是在XSLT中嵌入脚本,本文以VBScript为例描述了这一过程 现有XML文档pi.xml如下: <?xml version="1.0" encoding="utf-8"?> <?xml-styleshe

CSS 样式表中padding 的用法

CSS中padding 描述的是内边距的意思,margin是外边距.QSS中同样的道理. 1. padding表示内边距的意思,margin---外边距.2. CSS的 padding 属性定义元素边框与元素内容之间的空白区域.3. padding 接受长度值或百分比值,但不允许使用负值.4. 示例:如果希望所有内边距都是10 像素,只需要设置:padding:10px; 就可以了.5. 也可以分别设置4个边的内边距,只需通过它们的单独属性,分别设置上.右.下.左内边距:* padding-to