内容占位符添加图片,html图片属性设置
最典型的问题是画集的制作没有显示足够的图像：
解决方法有各种各样。 可以直接在后面留下空白区域； 也可以添加html标签作为占位符。 我认为第一个解决方案还可以，但我觉得第二个解决方案会让你的代码变得肮脏。 您也可以向图画书的元素添加背景图像，但这会增加http请求的数量。
cs3渐变就像背景图像。 仅将开始颜色和结束颜色设定为相同的颜色，不会生成渐变背景。 然后，可以通过与background-size和background-position配合使用来生成图像占位符。
步骤1 :通过渐变添加背景
先把图片全部删除了。 我打算添加背景：
. step-1 {
ack ground : linear-gradient (#dbE0df，# db E0 df )；
}
步骤2 :设定大小
使用background-size将渐变(渐变背景图像)的大小设置为与图像大小相同(156px )。 要避免渐变像第一步那样填充整个容器，必须将background-repeat设置为no-repeat。
. step-2 {
ack ground :线性梯度(#DBE0DF，#DBE0DF ) no-repeat；
background-size: 156px 156px；
}
步骤3 :设置渐变图像的位置
若要使渐变位置与图像占位符相匹配，必须使用background-origin属性并将背景图像的起始位置设置为content-box，以便从content边缘显示背景图像。
. step-3 {
ack ground :线性梯度(#DBE0DF，#DBE0DF ) no-repeat；
background-size: 156px 156px；
background-origin : content-box；
}
第四步：排序(横向)。
用空格代替报告。 使背景图像与文本对齐： justify效果稍微相似：
. step-4 {
background : linear-gradient (#dbE0df，# db E0 df ) space；
background-size: 156px 156px；
background-origin : content-box；
}
很完美，对吧？ 你在用Chrome浏览器，对吧？ 回到以前的特性吧。
步骤5 (重新定位(repeat ) ) ) ) )。
另一个解决方案是使用多个背景。 使用渐变创建的多个背景。 但是，这里需要手动放置每个背景。
. step-5 {
background :线性梯度(#dbE0df，#dbE0df ) 0，
线性梯度(#dbE0df，#dbE0df ) ) 166px 0，
线性梯度(#dbE0df，#dbE0df ) ) 332px 0，
线性梯度(#dbE0df，#dbE0df ) ) 498px 0，
线性梯度(#dbE0df，#dbE0df ) ) 664px 0；
background-repeat :否- repeat；
background-size: 156px 156px；
background-origin : content-box；
}
现在在大多数浏览器中他都很完美，在旧浏览器中可以看到透明的背景。 他只是一个图像占位符，比加载图像和拖动网站快得多吧。
但是，代码看起来相当复杂。 试着用Sass处理一下。
步骤Sass制作(DRY ) )。
@ function background-placeholder-images ($ color，$size，$gap，$count ) )。
$result: (；
@for $i from 1 through $count {
$x:($gap$size ) ) ) (* ($i - 1 )；
$result3360append($result，linear-gradient ) $color，$color ) $x 0，comma )；
}
@return $result；
}
@mixin background-placeholder
s($color, $size, $gap, $count) {
background: background-placeholder-images($color, $size, $gap, $count);
background-repeat: no-repeat;
background-size: $size $size;
background-origin: content-box;
}
.step-6 {
@include background-placeholders($color: #DBE0DF, $size: 156px, $gap: 10px, $count: 5);
}
这一步我们分解一下：
定义函数
为了实现gradient制作图像占位符，特意通过Sass的@function函数功能创建了一个background-placeholder-images函数。并且给这个函数传了几个参数：
$color：这个主要实现图像占位符的背景图像颜色。前面我们说过了，图像占位符使用的是CSS3的渐变功能制作的，而且起始和终止色是相同的，所以在这里定义一个颜色的参数$color。
$size：每个占位符需要一个尺寸，而且这个尺寸大小和图像的尺寸是一致的。不过有一个缺陷，我们这里使用的是一个正方形图像，如果图像尺寸不是正方形，此处需要定义两个尺寸变量。个人建议使用$size-width和$size-height。如此一来，不管图像尺寸是不是正方形，我们都能很好的控制。后面我们将实现一个不是正方形图形的一个案例。
$gap：这个参数主要是用来设置占位符与占位符之间的间距。你可以将此想像成是一个Grid。那么在列与列之间有一个列间距，那么$gap就是这个列间距。
$count：这个参数很好理解，他就是图像占位符的个数。
因为我们在制作图像占位符时，使用渐变制作的背景图像，而且结合了多背景功能，因此在整个背景图像中会有多个line-gradient，而具体会有多少个，这需要我们的$count参数决定。如此一来，在Sass中我们就需要使用到list特性。所以在函数的最开始地方，先预设置了一个空的列表$result:
$result:();
在Sass中，我们可以通过给变量赋予一个空值，来初始化一个列表。详细介绍请阅读早前博文《理解Sass的list》中“创建一个Sass的list”一节。
由于有多个背景图像，而且每个背景图像的background-position位置是不一样的，而且这个个数也是未知的，所以我们需要通过Sass的遍历功能来遍历。在这里使用了Sass中的@for指令。
@for $i from 1 through $count {
$x: ($gap + $size) * ($i - 1);
$result: append($result, linear-gradient($color, $color) $x 0, comma);
}
在这个@for循环中有一个数学计算：
$x: ($gap + $size) * ($i - 1);
这个计算，主要用来控制背景图像的水平位置，也就是background-position在X轴的起始点，而Y轴的起始点始终是在0处。我们来看一张图：
接下来通过append()函数将得到的渐变图像值再插入到$result列表。
特别需要注意的是，在使用append()函数插入渐变图像值到$result列表中时，使用的是逗号(,)，那么在Sass中主要使用comma和space来区分。其中comma值指定列表中的列表项值之间使用逗号(,)分隔， space值指定列表中的列表项值之间使用空格( )分隔。
所以在上面的代码中，最后有一个comma参数。详细介绍可以点击这里中jion()函数一节。
实现渐变图像的函数功能有了，我们还有其他的参数需要设置，在此，通过@mixin创建了一个background-placeholders混合，并且传给了$color、$size、$gap和$count几个参数，而且这几个参数所起作用与background-placeholder-images()函数功能是一样的。
@mixin background-placeholders($color, $size, $gap, $count) {
background: background-placeholder-images($color, $size, $gap, $count);
background-repeat: no-repeat;
background-size: $size $size;
background-origin: content-box;
}
到这一步，我们使用Sass制作图像占位符的功能就完成了，在需要使用的地方调用我们定义好@mixin backround-placeholders：
.step-6 {
@include background-placeholders($color: #DBE0DF, $size: 156px, $gap: 10px, $count: 5);
}
编译出来的CSS:
.step-6 {
background: linear-gradient(#dbe0df, #dbe0df) 0px 0, linear-gradient(#dbe0df, #dbe0df) 166px 0, linear-gradient(#dbe0df, #dbe0df) 332px 0, linear-gradient(#dbe0df, #dbe0df) 498px 0, linear-gradient(#dbe0df, #dbe0df) 664px 0;
background-repeat: no-repeat;
background-size: 156px 156px;
background-origin: content-box; }
前面说了，我们这个功能只适合于图像是正方形的，也就是图像占位符也是正方形的，一旦换成长方形就不适用了。那么我们在此基础上做一定的修改，将$size参数换成$size-widt和$size-height：
@function background-placeholder-images($color, $size-width,$size-height, $gap, $count) {
$result: ();
@for $i from 1 through $count {
$x: ($gap + $size-width) * ($i - 1);
$result: append($result, linear-gradient($color, $color) $x 0, comma);
}
@return $result;
}
@mixin background-placeholders($color, $size-width,$size-height, $gap, $count) {
background: background-placeholder-images($color, $size-width,$size-height, $gap, $count);
background-repeat: no-repeat;
background-size: $size-width $size-height;
background-origin: content-box;
}
.step-7 {
@include background-placeholders($color: #DBE0DF, $size-width: 250px,$size-height:156px, $gap: 10px, $count: 4);
}
注意其中的变化。最终效果如下：
我们回到原文中。
最后，通过Sass我们实现了自动化，不需要人工手动去计算。除了这个案例之外，在Homify的样式指南中，提供了更多复杂的案例，有兴趣的同学可以从中找出更多更有用的知识。希望能将你的所得与我们一起分享。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：