Question

我的网站retrokent.com 我的问题是徽标模糊。转换：翻译和webkit转换：翻译

.nm-header.centered .nm-header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

当我关闭“转换：翻译”和“ webkit-转换：翻译”功能时，问题就解决了。

但是徽标随后发生位置偏移。我该如何解决？你能帮我吗？

screenshot-1：https://prnt.sc/tr16j4 屏幕截图2：https://prnt.sc/tr16te

Answer 1

您可以在不更改transform: translate(-50%, -50%)的情况下居中放置图像，只需更改CSS。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 10;

要进行响应，您可以将text-align: center设置为media queries。

转换：翻译功能使徽标模糊

1 个答案: