当网页中源图片要比实际需要的图片尺寸大很多，图片就会被压缩，导致图片中的字变得模糊，
这时候就可以给img图片加上如下代码

img{
   image-rendering: -moz-crisp-edges;
   image-rendering: -o-crisp-edges;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor;
}

PSD文件减肥脚本用法：

1、在PS中打开需要瘦身的PSD文件;

2、PS菜单栏选择 「文件」— 「脚本」— 「浏览」，选择解压后得到的”PSD减肥.jsx”;

注：如果你不想每次都通过”浏览”来找文件，可以直接把”PSD减肥.jsx”丢到”\Adobe Photoshop XX\Presets\Scripts“，即可以直接在「文件」— 「脚本」下看见该脚本。

3、等待其自动处理完成，然后保存文件，你会发现文件变的比原来小了！

PSD减肥.zip

轻量化CSS框架，简单好用

media查询类名

sm        ≥ 568px            .pure-u-sm-*

md        ≥ 768px            .pure-u-md-*

lg        ≥ 1024px           .pure-u-lg-*

xl        ≥ 1280px           .pure-u-xl-*

xxl       ≥ 1920px           .pure-u-xxl-*

xxxl      ≥ 2560px           .pure-u-xxxl-*

x4k       ≥ 3840px           .pure-u-x4k-*

- 阅读剩余部分 -

在整个代码前，添加div，即loading层

<div id="loading">
    <img src="images/loading.gif" alt="loading.." />
</div>

CSS

#loading {
    position: fixed;
    z-index: 400;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 1rem;
    color: #585858;
    background: #fff;
}

jQuery

jQuery(document).ready(function(){
    jQuery(window).load(function(){  //load函数
        jQuery("#loading").hide();
    });
});

1、 渐变的背景

background: -webkit-linear-gradient(-45deg, #ccc 20%, #999 60%);

2、规定背景的绘制区域为文字区域

-webkit-background-clip: text;

3、文字填充颜色

-webkit-text-fill-color: transparent;
  1. 1
  2. 2