我正在尝试使用 css 在带有 background-image
的 a
元素上插入 Logo 图像。
但是,我无法让 a:before
框遵守 a
的填充。
下面代码片段中的第一个示例使用了 width
、height
和 display:block
但什么也没有显示。
因此,我在第二个示例中尝试使用 position: absolute
。显示了 Logo ,但它不符合 a
的填充。
如何使 Logo 适合 a
的填充?
当前
预计
我想避免做什么
由于响应式设计要求,我希望根据 a
的元素大小更改 Logo 的大小。因此,下面是一些我想避免的事情。
- 使用固定值使
.logo:before
适合a
的填充。 - 修改
a
样式
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: center;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
display: block;
}
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
<div class="container">
<a class="logo absolute">Logo</a>
<p>Navigation links</p>
</div>
最佳答案
尝试将 Logo 的 top 和 bottom 属性的值更改为 .3125rem;
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: .3125rem;
bottom: .3125rem;
}
关于html - :before to respect parent's padding,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55174606/