代码之家 › 专栏 › 技术社区 › josephting

:在尊重父项的填充之前

css html

josephting · 技术社区 · 6 年前

我正在尝试插入一个使用css的徽标图像 a 具有的元素 background-image .

但是,我没能得到 a:before 一

下面代码段中的第一个示例是使用 width height 和 display: block

所以,我试着 position: absolute 在第二个例子中。商标显示出来了,但它不尊重的填充。

我该如何使它的标志适合内垫 一

我想避免做的事

的元素大小。因此,下面是一些我想避免的事情。

使用固定值进行拟合 .logo:before 一
修改样式

*, ::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>

2 回复 | 直到 6 年前

boosted_duck 6 年前

尝试将徽标的top和bottom属性的值更改为.3125rem;

.logo.absolute:before {
  position: absolute;
  left: 0;
  right: 0;
  top: .3125rem;
  bottom: .3125rem;
}

Saravana 6 年前

我把垫子移走了 logo 并补充道 min-height: 28px; 你的背景图片。期待进一步提问。

*, ::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;
  min-height: 28px;
}

<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>

josephting 6 年前

自 .logo:before 的 content 是空字符串,除非 height 用固定值显式定义。

content: ' ' 可以修复问题,但这只是一个修补程序,而不是根修复程序。

根本原因是 align-items: center 在里面 .container 内容 引起 .logo:before 元素完全不显示任何内容。

当前期望的行为是 .logo 的高度匹配导航链接的高度,没有必要使用这里和 normal

这个 position: absolute

*, ::before, ::after {
  box-sizing: border-box;
}
body { margin: 0; }

.container, .container > p, .container > .logo {
  display: flex;
}

.container {
  align-items: normal;
  justify-content: space-between;
  margin-left: 2rem;
  margin-right: 2rem;
  background-color: gray;
}

.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%;
}

<div class="container">
  <a class="logo">Logo</a>
  <p>Navigation links</p>
</div>