0

我正在尝试根据下面的屏幕截图将背景图像插入每个选项卡，但因为箭头是使用伪元素创建的，所以我不知道该怎么做。

在此处输入图像描述

请看下面我到目前为止的一个片段。最终产品应该看起来像屏幕截图，所以我只是缺少背景中的图像。请务必在展开视图中查看片段。

我曾尝试在前面设置一个带有颜色的背景图像，但这没有用。我似乎一辈子都想不通！

如果有人可以提供帮助，将不胜感激。

/* CDCD HOMEPAGE */

.u-nav-v8-2 .nav-item:first-child .nav-link {
  padding: 35px 85px 35px 135px;
}

.u-nav-v8-2 .nav-link {
  padding: 35px 100px 35px 135px;
}

[class*="u-nav-v8"] .nav-link {
  background-color: #767577;
}

[class*="u-nav-v8"] .nav-link::after {
  background-image: linear-gradient(to left, #767577 0%, rgba(118, 117, 119, 1) 100%);
}

.u-nav-v8-2 .nav-link::before {
  background-image: linear-gradient(to bottom left, transparent 49.6%, #767577 50%), linear-gradient(to top left, transparent 49.6%, #767577 50%);
}

[class*="u-nav-v8"] .nav-link.active {
  background-color: #B81818;
}

[class*="u-nav-v8"] .nav-link:hover {
  background-color: #B81818;
}

[class*="u-nav-v8"] .nav-link:hover:after,
[class*="u-nav-v8"] .nav-link:hover:before {
  background-image: linear-gradient(to bottom left, transparent 49.6%, #B81818 50%), linear-gradient(to top left, transparent 49.6%, #B81818 50%);
}

.u-nav-v8-2 .nav-link.active::before {
  background-image: linear-gradient(to bottom left, transparent 49.6%, #B81818 50%), linear-gradient(to top left, transparent 49.6%, #B81818 50%);
}

[data-tabs-mobile-type="slide-up-down"] {
  padding-top: 0px;
}

[data-tabs-mobile-type="slide-up-down"] .nav-link {
  border: none;
  border-width: 0px;
  border-style: none !important;
}

@media (max-width: 991px) {
  .u-nav-v8-2 .nav-item:first-child .nav-link {
    padding: 35px 85px 35px 85px;
  }
  .u-nav-v8-2 .nav-link {
    padding: 35px 100px 35px 85px;
  }
}
<link href="http://impression.testcre8.co.uk/assets/css/unify-components.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://impression.testcre8.co.uk/assets/vendor/bootstrap/bootstrap.min.js"></script>
<link href="http://impression.testcre8.co.uk/assets/css/unify-core.css" rel="stylesheet" />
<link href="http://impression.testcre8.co.uk/assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" />

<!-- CDCD -->

<ul class="nav nav-fill justify-content-center d-flex flex-wrap flex-lg-nowrap u-nav-v8-2" role="tablist" data-target="nav-8-2-primary-hor-center" data-tabs-mobile-type="slide-up-down" data-btn-classes="btn btn-md u-btn-primary btn-block">
  <li class="nav-item">
    <a class="nav-link active" href="/impression-visual-branding-services/visual-branding-consultancy/">
      <h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Consult <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
      <p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Understanding your brief, campaign goals &amp; vision.</p>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#creativeConcept">
      <h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Design <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
      <p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Creative concepts that bring your brief to life.</p>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#modeling3D">
      <h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Create <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
      <p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Fully in-house, quality-assured production.</p>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#happyClients">
      <h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Deliver <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
      <p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Packing, dispatch &amp; on site installation management.</p>
    </a>
  </li>
</ul>

<!-- END CDCD -->

4

1 回答 1

0

为了使伪元素可见，您必须提供content属性，例如content: '';在您的情况下。也不要忘记设置宽度和高度。

[class*="u-nav-v8"] .nav-link::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to left, #767577 0%, rgba(118, 117, 119, 1) 100%);
}
于 2020-09-14T14:10:41.323 回答