使用CSS3 Gradients创建图片占位符

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

本文根据Nico Hagenburger的《Use CSS3 Gradients to Create Placeholders for Images》一文整理

最典型的问题是在画册制作中,没有显示出足够多图片:

使用CSS3 Gradients创建图片占位符

解决方案有很多种,你可以在后面直接留空白区域;你也可以添加额外的html标签作为占位符。第一种方案觉得还可以,但第二种解决方案感觉会让你的代码不干净。或者给画册元素添加一个背景图像,但这样会增加http的请求数。

CSS3渐变就像是背景图像。只需要把他的起始色和终止色设置为相同颜色,这样就不会产生一个渐变的背景。然后通过与background-sizebackground-position的配合,可以生成图像占位符。

第一步:用渐变添加背景

把图片先全部删除了,打算加个背景:

使用CSS3 Gradients创建图片占位符

.step-1 {
  background: linear-gradient(#DBE0DF, #DBE0DF);
}

第二步:设置尺寸

使用background-size将渐变(渐变制作的背景图片)尺寸设置和图片尺寸一样(156px)。为了防止渐变像第一步那样填充整个容器,需要设置background-repeatno-repeat

使用CSS3 Gradients创建图片占位符

.step-2 {
  background: linear-gradient(#DBE0DF, #DBE0DF) no-repeat;
  background-size: 156px 156px;
}

第三步:设置渐变图像位置

要保持渐变图位置和图像占位符保持一致,这个时候需要使用background-origin属性,并且将其设置为content-box用来设置背景图片起始位置从content的外边缘开始显示。

使用CSS3 Gradients创建图片占位符

.step-3 {
  background: linear-gradient(#DBE0DF, #DBE0DF) no-repeat;
  background-size: 156px 156px;
  background-origin: content-box;
}

第四步:重排(横向排列)

使用space替代repeat。让背景图片有点类似于text-align: justify效果:

使用CSS3 Gradients创建图片占位符

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/background-placeholders-with-gradients.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部