Question

我有一个SVG动画横幅，我想将其淡化为下面的jpg图像。 svg横幅会淡出，但背景图像的大小不一样，它也会淡出，这是我不希望的。

我制作了一个带有黑色bg的svg线动画，动画完成后会逐渐消失，但是我想在动画和黑色div消失时显示其下方或代替它的图像。我已经尽力了。我可以在它下面得到图像，但是它的大小和位置与黑色div不同，并且图像也会淡出（我认为是由于jquery淡入了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>

.center-div黑色bg和svg线正常工作并正确消失。背景图像显示它们一旦褪色但没有填充黑色bg div所占据的空间-较小，没有居中，并且也褪色。我不希望那消失。它也不像黑色div和线条动画那样反应灵敏。

Answer 1

背景消失的原因是，一旦移除其中占用空间的东西，它就会缩小到一无所有。通过为其设置宽度和高度，背景会在淡入淡出之后保留。

背景图像没有填充矩形的原因是您没有缩放矩形。

在这里查看小提琴：https://jsfiddle.net/a8mu9z0v/

我用过

background-size: cover;

但是，不同的缩放方法可能更适合您。

编辑：

使背景图像作出响应取决于其应缩放的方向。

如果在我的示例中更改包装纸的宽度，但将高度保留为固定值，它将缩放背景图像以适合宽度，但当缩放的图像超出范围。

width: 100%;
height: 200px;

如果将背景大小更改为100％，它将自动缩放到包装的边界，但不会保持其宽高比：

background-size: 100% 100%;

如果您要为包装器保持一定的长宽比，那么可以使用某些css技巧来做到这一点，您可以在其他地方看到。

另一个选择是使用图像元素而不是背景图像。图像元素本质上会占用空间。如果包装器中仍然有图像元素，则包装器将不会缩小为零。将图像元素放大到窗口大小很容易。

SVG线动画逐渐淡出背景图像？

1 个答案: