Как убрать фоновое изображение с прозрачной кнопки

Question

У меня есть фоновое изображение, которое представляет собой зеленую толстую линию, а поверх него есть заголовок и прозрачная кнопка со значком. Я хочу, чтобы фоновое изображение не было видно в заголовке и кнопке. Это то, что я имею сейчас, Изображение 1

Это то, чего я хочу достичь, Изображение 2

Я легко могу сделать это, если кнопка не имеет прозрачных цветовых эффектов, есть ли способ сделать это при сохранении прозрачных эффектов?

Вот код:

<div class="parent">
  <h2 class="headerclass">Sample Text</h2>
  <div class="text-right icon-box icons">
    <div class="dropdown">
      <a class="btn btn-default" data-toggle="dropdown" role="button">
        <i aria-hidden="true" class="iconHelp"></i>
        <span>ABC</span>
      </a>
      <ul class="dropdown-menu dropdown-menu-right" role="menu">
        <li class="dropdown-item"><span>Some dropdown item</span></li>
      </ul>
    </div>
  </div>
</div>

.icons {
    background-repeat: repeat-x;
    background-image: url(/design/greenline.svg);
}
.btn-default:hover {
    background-color: rgba(217, 217, 217, 0.65);
    background-clip: content-box;
}
.icon-box {
    padding-top: 7px;
    height: 31px;
}
.iconHelp {
    content: url(/design/help.svg);
    background-size: cover;
    display: inline-block;
}
.headerclass {
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 21px;
    font-weight: normal;
    margin: 0;
    line-height: 1.1;
    color: inherit;
}
.btn-default {
    border: none;
    background: none;
    height: 46px;
    width: 96px;
    justify-content: center;
    align-items: center;
    padding: 3px;
    display: inline-flex;
    border-radius: 22.9px;
    font-size: 15px;
}

Я попытался использовать overflow:hidden в .icon-box, но затем раскрывающееся меню также скрылось. Я также попытался установить z-index но не повезло.

Любая помощь?

Answer 1

Для

попробуйте просто добавить "background-color: white;" Я не вижу, где появляется серый цвет в кнопке, это RGBA или это цвет из SVG? Если он из svg, войдите в файл svg и установите вместо него solid серый цвет фона, похоже, он просто немного прозрачный. (я не смог протестировать код должным образом, но это может стоить попробуйте)