时间戳

首页 > 解决方案 > 我可以在不知道高度的情况下响应性地将 ::before 元素添加到它的父元素的顶部吗

css - 我可以在不知道高度的情况下响应性地将 ::before 元素添加到它的父元素的顶部吗

问题描述

我想在div 的顶部添加一条斜条纹。我将使用 SVG 来创建它（或者我可以使用 CSS）。我可以用媒体查询来做到这一点，但我想知道是否有办法使用 CSS 自动解决这个问题。

如果我知道 height，我可以做到这一点，并且我可以手动将高度添加到媒体查询中（这不是一项很长的工作）。但肯定有更聪明的方法吗？

我尝试查看 calc，但它再次依赖于我们知道宽度或百分比或类似内容。

我不想使用 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>

目前它完全依赖于我的负边距。还有另一种方法可以实现这一目标吗？

尝试实现这一点的主要原因是因为.itemTitlediv 中的内容可以是可变长度

标签： css

解决方案

在 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);
    }
  }

推荐阅读