大家有没有对 CSS 中的百分比是如何工作的感兴趣？有没有想过，为什么它有时会乱七八糟，没啥头绪？反正我是有，所以今天分享这篇文章，对自己来说是加深理解，同时也希望对大家有所帮助。

本篇主要介绍一些按照百分比来截取显示一部分图片， 采用css+div来定义，我自己试过一个做背景，一个图片，然后百分比显示图片但是这种方式图片变形，所以现在这种方式是两个都采用背景，上面的一个百分比显示。

<div class="ct_shanghu_pingjia_xing">

日常在业务中会经常使用到图片，而涉及到一些大图的加载等待的时间较长，一般为了用户更好的体验，会使用一些不同的图片加载效果，比如以下几种情况：

常见样式属性及值

字体:

font

-family

-size

-style: normal(正常)|italic(倾斜)|oblique

-weight: normal|bold(粗体)

作者 | 开课吧无忧

编辑 | 开三金

来源 | 开课吧前端团队（ID:KKBWeb）

背景表格绘制

	/*网格背景*/
		.gradtable{
			background-position:0px 0px;
			background-size: 15px 15px;
			background-image:
				linear-gradient(#FC0000,#00FF78 1px,transparent 1px,transparent 15px),
				linear-gradient(90deg,#FC0000,#00FF78 1px,transparent 1px,transparent 15px);
			background-repeat:repeat;
		}