个人中心
gpt4 book ai didi

css - Chrome 背景图像 "Bleeds"应用了 CSS 缩放变换的边缘

转载 作者：技术小花猫 更新时间：2023-10-29 11:13:07 25 4
gpt4 key购买 nike

在 Chrome 中对具有背景图像的元素应用几个转换后，我看到了奇怪的行为。

我正在尝试构建一个游戏，该游戏的背景覆盖整个屏幕，并且缩放 Angular 色围绕该背景移动。该 Angular 色有多个动画帧，我通过以类似于常见 CSS Sprite 技术的方式移动背景位置 x 或 y 来显示每一帧。

问题是我看到 Angular 色图像中相邻帧的上边缘或左边缘。现在，这只发生在某些规模，但它清晰可见且令人分心。出于演示目的，我使用了具有两帧的 364x1328 图像。顶部框架包含一个黑框，其 364x664 边界中没有红色。底部框架为纯红色。选中边界的顶部框架显示在左侧的图像编辑器中，右侧粘贴了 Chrome 的输出:

Frame boundaries on the left (364x664), output from Chrome on the right

在 Chrome 的输出中，您可以清楚地看到底部有一个红色边框。鉴于我的背景图像包含在一个 364x664 的盒子中，我希望只显示该盒子中可见的像素。换句话说，我希望看到我在 scale(1) 上看到的内容，但按比例缩小了。 Chrome 似乎出于某种原因正在重新采样背景图像。

为了简化演示，我提供了一个 JS Fiddle: http://jsfiddle.net/CL5Gh/ 

<!DOCTYPE html>
<html>
<head>
<style>

#b
{
    -webkit-transform: scale(0.4775);
    -webkit-transform-origin: 0 0;
}

#d
{
    height: 664px;
    width: 364px;
    background-image: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%01l%00%00%050%02%03%00%00%00%1A%F2%87%B5%00%00%00%2CtEXtCreation%20Time%00Sun%2017%20Feb%202013%2022%3A08%3A49%20%2B1000%FC%E8%C07%00%00%00%07tIME%07%DD%02%11%0B%1B%0B%C2%A0%3B8%00%00%00%09pHYs%00%00%1E%C1%00%00%1E%C1%01%C3iTS%00%00%00%04gAMA%00%00%B1%8F%0B%FCa%05%00%00%00%09PLTE%00%00%00%00%00%00%FF%00%00%3D%FB%DD-%00%00%00%01tRNS%00%40%E6%D8f%00%00%01%A4IDATx%DA%ED%CC1%0D%000%08%000%9EI%C4%24*11%C8%92%B5%02%1A%01%00%00%00%00%00%FC%E4%E45n%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%ED%06%00%00%00%00%00%DESs%DCn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%7B%F3n%80%3C%CA%A7%B6%23%99%BC%00%00%00%00IEND%AEB%60%82);
    -webkit-transform: scale(0.4375);
}

</style>
</head>
<body>
  <div id="b">
    <div id="d">
    </div>
  </div>
</body>
</html>

现在，我不确定这是否在某种程度上取决于视频卡或机器。在 fiddle 中，您会看到应用了两个缩放变换。这是在模拟我的游戏中发生的事情。第一个是背景的缩放，第二个是主 Angular 的缩放。

如果有任何帮助，我将不胜感激。我考虑过用 50 像素填充每个帧(多少足够？)填充以消除问题，但这看起来很老套，我想要一个真正的答案。

最佳答案

这似乎是因为 CSS 转换可以在子像素位置进行插值，所以如果您的元素的位置不适合像素，您会看到“dubstep 效果”(参见 http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)。

由于 scale 无法用 CSS2 模拟(不像文章中的 translate)，恐怕没有解决方案。

除非特定的 CSS3 规则已经存在或将会存在，否则我正在搜索它。

编辑:-webkit-backface-visibility: hidden; 在 Chromium 上做这个把戏，不知道为什么......

关于css - Chrome 背景图像 "Bleeds"应用了 CSS 缩放变换的边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14920996/

25 4 0
文章推荐： objective-c - 新的对象文字是否向后兼容 iOS 5？
文章推荐： linux - 通过 sendto() 的 UDP 广播返回 "Can' t assign requested address"on OS/X but not Linux
文章推荐： linux - 我如何在批处理文件中写这个
文章推荐： linux - Grape 和 Yum 安装依赖有什么区别？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com