html - 使用 Skew 的背景图像会导致间隙吗?
问题描述
好的,所以当在倾斜元素上使用背景图像时,它似乎会造成间隙,我不知道为什么。当项目没有倾斜时,没有间隙。这是什么原因,我该如何解决这个问题?
您可以在此 CodePen上看到问题。
HTML
<ul id="menu-main-menu" class="navbar-nav">
<li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143 nav-item"><a href="#about" class="nav-link">About</a></li>
<li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144 nav-item"><a href="#gameplay" class="nav-link">Gameplay</a></li>
<li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145 nav-item"><a href="#crowd" class="nav-link">Crowd Funding</a></li>
<li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-146 nav-item"><a href="#mail" class="nav-link">Mail</a></li>
<li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147 nav-item"><a href="#contact" class="nav-link">Contact</a></li>
<li id="menu-item-148" class="menu-download menu-item menu-item-type-custom menu-item-object-custom menu-item-148 nav-item"><a target="_blank" href="#!" class="nav-link">Download</a></li>
</ul>
CSS
body {
background: #000;
}
a {
color: #FFF;
margin: 0 20px;
text-decoration: none;
}
.navbar-nav > li {
padding: 0;
background: url(https://indie.nathandasilva.co.uk/wp-content/themes/indie/assets/img/menu-bg.png);
background-size: 1px 63px;
height: 63px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
transform: skew(0);
}
.navbar-nav {
padding: 16px 0px 16px 21px !important;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-nav > li a {
transform: skew(0deg);
font-family: 'BebasNeue-Regular', sans-serif !important;
font-size: 26px !important;
}
倾斜版本:
普通版:
解决方案
推荐阅读
- jasper-reports - Jasper 条形图:无法显示标签
- apache-spark - 如何使用 Spark 流将数据从 Kafka 插入到 Kudu
- visual-studio-2017 - Resharper 2017 自定义规则设置
- c# - 标记完成后重新打开 TPL 数据流输入
- vbscript - 安全 CRT 向主机 VBS 发送命令
- java - Android 8.1 上的 AutofillManager WebView 输入崩溃
- azure - 将 Azure 应用服务日志连接到 ELK
- c# - 使用 mongodb 映射(POCO)时区分空字段和缺失字段
- django - python3 django-admin 语法错误
- android - 将图像保存在内存中,公共文件夹中没有副本