Блог

У меня есть анимационный баннер SVG, который я хочу преобразовать в изображение JPG под ним. Баннер svg исчезает, но фоновое изображение другого размера, и оно также исчезает, чего я не хочу.

Я создал анимацию строки svg с черным bg, которая исчезает, когда анимация завершена, но я хочу показать изображение под анимацией или вместо нее и черный div, когда он исчезнет. Я перепробовал все, что смог найти. Я могу получить изображение под ним, но оно не того же размера и расположения, что и черный div, и изображение также исчезает (я думаю, из-за кода jquery fade div.center-div?). Я хочу, чтобы изображение оставалось, и я также хочу, чтобы оно реагировало. Я создал jsfiddle, но черный div / svg в нем не исчезает, хотя на моем компьютере это происходит, не уверен почему.К сожалению, вы не можете увидеть JPG под ним здесь —https://jsfiddle.net/keltoid/dw2vcmoq/47 /

 $(document).ready(function(){
setTimeout(function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
}, 4500);
});  

 svg {
  height: 100%;
  width: 100%;
  margin:auto;
  
}
.wrapper {position:relative; background-image:url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/treebanner2.jpg) ;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  z-index:3; 

  background-repeat:no-repeat;
 } 
 	
.center-div
{
  position:relative;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  background-color: #000;
  z-index:1; 
  background-position: left top;           
}
.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
	
}
.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;	
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="center-div">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
 height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<g id="line">

	<path class="st1" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st1" d="M739.8,232.8"/>

	<path class="st2" d="M739.8,232.8"/>

</g>
</svg>
</div>
</div>  

Черный bg .center-div и строка svg работают правильно и правильно исчезают. Фоновое изображение отображается, как только они исчезают, но не заполняет пространство, которое занимал черный bg div — оно меньше, оно не центрировано и также исчезает. Я не хочу, чтобы это исчезало. Она также не реагирует, как анимация черного div и строки.

Причина, по которой фон исчезает, заключается в том, что, как только вы удаляете элементы внутри него, которые занимают место, он уменьшается до нуля. Установив для нее ширину и высоту, фон остается после исчезновения.

Причина, по которой фоновое изображение не заполняет прямоугольник, заключается в том, что вы не масштабируете его.

Смотрите скрипку здесь:https://jsfiddle.net/a8mu9z0v /

Я использовал

 background-size: cover;
  

Но другой метод масштабирования может работать лучше для вас.

Редактировать:

Адаптивность фонового изображения зависит от направлений, в которых оно должно масштабироваться.

Если вы измените ширину оболочки в моем примере, но оставите высоту фиксированным значением, фоновое изображение будет масштабироваться в соответствии с шириной, но обрезается нижняя часть изображения, когда масштабируемое изображение превышает границы.

 width: 100%;
height: 200px;
  

Если вы измените размер фона на 100%, он будет масштабироваться до границ оболочки, но не сохранит свое соотношение сторон:

 background-size: 100% 100%; 
  

Если вы хотите сохранить определенное соотношение сторон для оболочки, то есть определенные приемы css, которые могут помочь вам в этом, которые вы можете увидеть в другом месте.

Другим вариантом было бы использовать элемент изображения вместо фонового изображения. Элементы изображения по сути занимают место. Ваша оболочка не уменьшилась бы до нуля, если бы внутри нее все еще был элемент изображения. Элемент изображения легко масштабировать до размера окна.