Блог

Главная - Вопросы по программированию - HTML — CSS | Я хочу внедрить 2 пользовательские формы div в мой образ героя, но это не работает плавно

HTML — CSS | Я хочу внедрить 2 пользовательские формы div в мой образ героя, но это не работает плавно

#html #css

Вопрос:

Я пытаюсь создать свой «образ героя» с помощью пользовательских divs. В настоящее время я использовал 2 SVG (в пределах div каждый) в HTML.

 <div class="overflow-hidden"> 
  <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="842" viewBox="0 0 1920 842"> 
    <path id="Path_4" data-name="Path 4" d="M1920-230V407H769.96L0,612V540Z" transform="translate(0 230)" fill="#252525" opacity="0.7"/> 
  </svg> 
</div>

<div class="overflow-hidden"> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="345" viewBox="0 0 1920 345"> 
    <defs> 
      <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"> 
        <stop offset="0" stop-color="#c0c0ca"/> 
        <stop offset="1" stop-color="#91939a"/> 
      </linearGradient> 
    </defs> 
    <path id="Path_55" data-name="Path 55" d="M0,205,769.964,0H1920V345H0Z" opacity="0.7" fill="url(#linear-gradient)"/> 
  </svg>  
</div>

По сути, это должно стать заголовком моей веб-страницы:
желаемый результат

И это то, что у меня сейчас есть: текущий результат

У кого-нибудь есть идеи, как правильно это сделать? Заранее благодарю вас!

Ответ №1:

Таким образом, вы можете поместить их в оболочку, для которой вы устанавливаете положение relative, а затем позиционируете изображения absolute Вот jsFiddle: https://jsfiddle.net/L9vw0m5t /

 <div class="wrapper">
<div class="overflow-hidden first-img"> 
  <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="842" viewBox="0 0 1920 842"> 
    <path id="Path_4" data-name="Path 4" d="M1920-230V407H769.96L0,612V540Z" transform="translate(0 230)" fill="#252525" opacity="0.7"/> 
  </svg> 
</div>

<div class="overflow-hidden sec-img"> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="345" viewBox="0 0 1920 345"> 
    <defs> 
      <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"> 
        <stop offset="0" stop-color="#c0c0ca"/> 
        <stop offset="1" stop-color="#91939a"/> 
      </linearGradient> 
    </defs> 
    <path id="Path_55" data-name="Path 55" d="M0,205,769.964,0H1920V345H0Z" opacity="0.7" fill="url(#linear-gradient)"/> 
  </svg>  
</div>
</div>

И CSS:

 .wrapper {
  position:relative;
}
.first-img {
    position: absolute;
    top: 0;
}
.sec-img {
    position: absolute;
    top: 637px;
}
Метки: ,