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

我可以在不知道高度的情况下,将a::before元素添加到其父元素的顶部吗?

css

Eoin · 技术社区 · 6 年前

我想知道 在我的div顶部加一条斜线

如果我知道它的高度 ,我可以手动将高度添加到媒体查询中(这不是一项很长的工作)。但肯定有更聪明的方法?

我试着看看加州大学 ,但它同样依赖于我们知道宽度或百分比或类似值。

我不要想使用javascript。

这是我的代码:

.itemTitle--padder {
  position: absolute;    
  bottom: 0;
  width: 100%;
}
 .itemTitle--padder::before {
  background: url('../../../../images/joomla-london-brand-assets/videos-diagonal-background.svg?5d167918') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;    
  display: block;
  content: "";
  margin-top: -56px;
}

.itemTitle--holder  {
  position: relative;
  width: 100%;
  height: 100%;
  background: $dark-blue;
  padding: 0.25rem 0.5rem;
}

<div class="itemTitle--padder">
  <div class="itemTitle--holder">
    <div class="itemTitle">
      The Title of thing I'm creating
    </div>					
  </div>
</div>

目前它完全依赖于我的负利润率。有没有别的方法可以达到这个目的?

尝试实现此目标的主要原因是 .itemTitle div可以是可变长度

1 回复 | 直到 6 年前

Eoin 6 年前

在gregs的建议之后,我意识到使用::before并不是一个很好的方法来实现这一点,因为它总是从它的父母那里继承一些东西。

最后我用了两个div。

HTML格式

<div class="itemTitle--padder">
  <div class="itemTitle--image">
    <img src="../../../../images/joomla-london-brand-assets/videos-diagonal-background.svg" alt="" width="100%" height="auto">
  </div>
  <div class="itemTitle--holder">
    <div class="itemTitle">
      The Title
    </div>                  
  </div>                                
</div>

SCSS系统

  .itemTitle--padder {
    position: absolute;    
    bottom: 0;
    width: 100%;
  }

  .itemTitle--holder  {
    position: relative;
    width: 100%;
    height: 100%;
    background: $dark-blue;
    padding: 0.25rem 0.5rem;
  }

  .itemTitle--image {
    width: 100%;
    img {
      position: absolute;
      bottom: calc(100% - 1px);
    }
  }

推荐文章