Question

Screenshots of the issue＆lt; - 在肖像手机大小的窗口中，它可以正常使用，当在桌面上完全屏蔽时，徽标会被剪裁。

我有一张我想用作背景图片的图片。图像是通过一堆UI元素和公司徽标给我的，我用photoshop删除了所有UI元素，但在图像上留下了公司徽标。

我发现this CSS Tricks article给了我一个简单的方法，可以在我调整窗口大小时保持图像响应（想要确保它在移动设备上看起来也不错）然后我注意到公司徽标在顶部被切断。作为参考，徽标位于图像的近顶部并居中。

我使用了CSS技巧文章中的代码：

html { 
    background: url("img/image.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这是html：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
        <link rel="stylesheet" href="mainpageStyles.css">

    </head>
    <body>

    </body>
</html>

有没有更好的方法来确保图像在窗口内居中并且不会被切断？

我还注意到，如果窗口太宽太短，徽标就会完全消失。我是否应该在Photoshop中擦除徽标并将其显示为单独的图像，还是可以使用CSS修复此问题？

（背景图像）徽标在桌面上全屏截止，具体取决于窗口尺寸

0 个答案: