0

Нужно убрать svg с текста, чтобы был сзади и не вылазил за края блока, не изменяя размеры, типа обрезался страничка с кодом на codepen

введите сюда описание изображения

html{
  padding:10px;
  color:#2d2d2d
}
.svg_pu{
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0;
    fill: #DEE0ED;
    transform: rotate(20deg);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<svg>
  <symbol id="image" viewBox="0 0 16 16">
        <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
        <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
    </symbol>
</svg>
<div class="row mt-3">
  <div class="col-sm-2">
    <div class="card">
      <div class="card-body pb-2">
        <h6 class="card-title">Картинки</h6><h6>123456789101112131415161718</h6>
        <svg class="bi svg_pu" width="90" height="90"><use xlink:href="#image"/></svg>
      </div> 
    </div>      
  </div>    
</div>

2
  • 1
    Если я правильно понял, то добавьте: .card h6 {position: relative;z-index: 5;} .card-body {position: relative;overflow: hidden;}
    – Deonis
    20 янв 2022 в 22:41
  • yes, gj, thanks
    – Jenka
    20 янв 2022 в 22:44

1 ответ 1

0

тебе не хватает z-index в svg_pu

.svg_pu {z-index: -1}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.