伪元素上的背景图像

Question

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

请参阅下面的片段，了解我目前所处的位置。 最终产品应该看起来像屏幕截图，所以我只是缺少背景中的图像。 请务必在展开视图中查看代码段。

我试过在前面设置一个带有颜色的背景图像，但是没有用。 我似乎一辈子都无法弄清楚！

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

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

Answer 1

为了使伪元素可见，您必须提供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%);
}