V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cheeto
V2EX  ›  程序员

CSS transform:scale 会改变 background 的色值?

  •  
  •   cheeto · 2019-11-21 15:48:23 +08:00 · 2287 次点击
    这是一个创建于 1824 天前的主题,其中的信息可能已经有所发展或是发生改变。

    为了实现 0.3px 的线,用 3px+transfrom:scaleY ( 0.1 )去做,#DBDBDB 在实际手机截屏颜色不符,sketch 取色值为#F9F9F9

    难道 scale 也会把颜色压缩到一起???

    21 条回复    2019-11-22 11:20:37 +08:00
    hoyixi
        1
    hoyixi  
       2019-11-21 15:55:13 +08:00
    1 这么细,取色取准了吗
    2 border ?小于 1px 无法实现吧,记得 0.5 都不行
    cheeto
        2
    cheeto  
    OP
       2019-11-21 16:19:24 +08:00
    @hoyixi 准的,设计师把截屏放大到最大叠图+取色。
    就是因为没法实现小于 1px 的 border,所以想到用 scale 缩小,最后除了颜色其他都与 UI 契合
    rioshikelong121
        3
    rioshikelong121  
       2019-11-21 16:23:29 +08:00
    emmm.. mark. 没实现过这种需求。
    rioshikelong121
        4
    rioshikelong121  
       2019-11-21 16:36:26 +08:00
    google: 怎么画一条 0.5px 的边
    cheeto
        5
    cheeto  
    OP
       2019-11-21 16:38:47 +08:00
    @rioshikelong121 单纯的画 0.5px 的线没问题,如果颜色是#000 的话也没问题,问题在于如果是其他颜色的话,实际渲染到屏幕与期望不符
    hnsxxscyx
        6
    hnsxxscyx  
       2019-11-21 16:41:14 +08:00
    就是因为太细了系统无法渲染了才把色值混了吧,太细了,dpr 为 3 的屏幕物理像素都表现不出来,有意义吗?
    cheeto
        7
    cheeto  
    OP
       2019-11-21 16:42:54 +08:00
    @hnsxxscyx 推测应该也是这个原因。没办法,必须百分百还原设计稿,差 0.5 像素都不行😭
    noe132
        8
    noe132  
       2019-11-21 16:43:06 +08:00   ❤️ 2
    如果 devicePixelRatio > 1 / 0.3,那就可能画出 0.3px 的线。否则就是被反锯齿颜色混合了,要么就是线直接消失不渲染了
    cheeto
        9
    cheeto  
    OP
       2019-11-21 16:44:27 +08:00
    @noe132 了解了,感谢
    Vegetable
        10
    Vegetable  
       2019-11-21 16:46:09 +08:00
    猜一下
    假如这是显示器的话,一个像素只能显示一个颜色,如果要实现 0.3px 的线,那剩下的 0.7 个像素的颜色是不是就和这 0.3 混合了呢?混合之后颜色是不是就变了呢.
    Vegetable
        11
    Vegetable  
       2019-11-21 16:47:06 +08:00
    @cheeto 设计稿给出 0.3 像素的宽度挺搞笑的,那你让他出 1:1 的设计稿就好了...
    userdhf
        12
    userdhf  
       2019-11-21 16:47:19 +08:00
    100%还原是不可能的,光文字就不可能啊。。
    cheeto
        13
    cheeto  
    OP
       2019-11-21 16:52:50 +08:00
    @userdhf 文字内容不在考虑范围内,样式必须一致...反正要求极高,截屏叠图到一起,一点点都不能差😢
    lk920724
        14
    lk920724  
       2019-11-21 17:02:16 +08:00
    试试阴影?
    cheeto
        15
    cheeto  
    OP
       2019-11-21 17:13:18 +08:00
    @lk920724 嗯,试过,在某些机型下小于 1px 的阴影直接消失了
    hewelzei
        16
    hewelzei  
       2019-11-21 17:23:56 +08:00   ❤️ 1
    “截屏放大到最大叠图+取色”这就离谱,图像渲染的时候不可能直接渲染的,任何颜色边界只要放大了看就会有过渡。
    randyo
        17
    randyo  
       2019-11-21 17:27:41 +08:00 via Android
    厉害了,90%还原就不错了。100%还原是不是不用考虑响应式
    hewelzei
        18
    hewelzei  
       2019-11-21 17:27:52 +08:00
    我觉得你这个 UI 连基础的像素知识都不了解,0.3px 还截图放大取色,挺逗的
    lxrmido
        19
    lxrmido  
       2019-11-21 17:32:29 +08:00
    0.3px 的线是画不出实线来的,因为除不尽,0.5、0.25 都能在浏览器放大(而不是截屏放大)的操作下看到正确的颜色值,0.3 就必定是跟其他像素混合后的颜色值了
    lk920724
        20
    lk920724  
       2019-11-21 17:33:48 +08:00
    @cheeto 用图吧...或者适配部分机型?成功了 @我下,谢谢。
    yammy
        21
    yammy  
       2019-11-22 11:20:37 +08:00
    字体和边框的颜色外层会淡一些的,并不是你定义多少,所有的像素点都变成你那个颜色,你可以换个颜色用 chrome 自带的工具去放大取,会发里面有很多种颜色。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4396 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:32 · PVG 13:32 · LAX 21:32 · JFK 00:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.