WeFlow帮助文档

浏览11471
更新时间2022-04-11

如果你正在使用 tmt-workflow,那么当你运行 gulp build_dist 的时候,slice 的目录下的图片将会根据 CSS 的使用自动合并 。

使用介绍

当一张图片 icon-twitter.png 需要合并的时候,请放入 slice 目录中,然后在 style-index.css 中这么写:

.icon-word {    background-image: url('../slice/icon-twitter.png');
}

合并后:

.icon-word {    background-image: url('../sprite/style-index.png');    
background-position: 20px 20px;
}

如果图片支持 @2x,可以命名为 icon-twitter@2x.png 一起放入 slice 目录中,合并后会加入 media query:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (min-resolution: 240dpi) {

    .icon-word{        background-image:url("../sprite/style-index@2x.png");        
    background-position: -4px -4px;        
    background-size:132px;
    }

}

依此类推,如果为 3 倍图,则命名为:icon-twitter@3x.png 即可。目前只支持到 3 倍图。

注意点

  1. 图片一定是放在 slice 目录下才会被合并
  2. 使用的时候一定是 background-image 属性才会被识别匹配
  3. @2x 图保持偶数高宽。(懒癌犯了,病治好后让插件自动给奇数@2x图加透明白边也是可以的)

相关视频

更多

免费

php8,我来也
初级php8,我来也

321832次学习

收藏

免费

Thinkphp6.0正式版视频教程
中级Thinkphp6.0正式版视频教程

382457次学习

收藏

免费

细说PHP第一季
中级细说PHP第一季

282842次学习

收藏

免费

简单聊聊PHP创业那点事
初级简单聊聊PHP创业那点事

13418次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时 | 62.5万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时 | 39.7万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时 | 73.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号