如何为背景图像的高度设置动画答案

【问题标题】：How animate the height of the background image如何为背景图像的高度设置动画
【发布时间】：2015-07-08 17:47:15
【问题描述】：

我尝试了以下场景，我需要为我的背景图像设置动画，例如在我的 div 悬停时从下到上填充。而我的动画不像从底部填充，而是从底部到顶部滑动。任何人都可以建议我如何以正确的方式实现我的结果。我也可以使用 jQuery 动画和 css3 关键帧动画。

下面是我的小提琴代码

.bg {
  background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
  height: 250px;
  position: relative;
}
span {
  background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat top 32px center;
  bottom: 0px;
  height: 0;
  transition: height 0.5s;
  position: absolute;
  right: 0;
  left: 0;
}
.bg:hover span {
  height: 184px;
}

<div class="bg"><span></span>
</div>

Fiddle Link

【问题讨论】：

你可能会发现this很有用
@jbutler483 我从上到下尝试过，效果很好，但是当我从下到上尝试时，我遇到了麻烦。 :(
可以像图层一样使用四张图片
四张图片，你能解释一下吗@MarikselAzemaj
您可以使用两个图像，例如图层 1- 将创建直到效果的方形图层： 2- 具有透明边框的房屋图层：注意：您必须使背景颜色与房屋边框颜色相同.这。方形层必须在软管后面，所以当它上升时会产生填充边界的效果。

标签： javascript jquery html css css-shapes

【解决方案1】：

你可以这样做。棕色 div 从底部“滑动”到顶部。我希望这是你需要的。

当然，您必须使用 background images 而不是颜色。

function onClick(){
  document.getElementById("second").style.height = "0px";
}

div{
  position: absolute;
  height: 50px;
  width: 50px;
}

#first{
  background-color: brown;
}

#second{
  background-color: beige;
    transition: height 1s;
}

<div id="first"></div>
<div id="second" onclick="onClick()"></div>

【讨论】：

我试过你的例子，但它没有帮助我你能不能用我的图片更新小提琴链接。
@Benjamin 抱歉，但您的 JSFiddle 有点混乱。你做了很多不被认为是最佳实践的 CSS 东西。如果您在我的示例中将“背景颜色”更改为“背景图像”（当然您也必须提供 URL），那么您应该拥有您想要的。

【解决方案2】：

虽然这不是一个精确的复制品，但您可以使用伪元素来创建它，完全不需要图像：

.square,
.mini-square {
  height: 250px;
  width: 250px;
  background: lightgray;
  position: relative;
}
.square:before {
  content: "";
  position: absolute;
  border-left: 50px solid white;
  border-right: 50px solid white;
  height: 150px;
  bottom: 0;
  left: 0;
  width: 150px;
  z-index: 8;
}
.square:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 125px solid white;
  border-top: none;
  border-bottom-color: transparent;
  width: 0;
  z-index: 8;
}
span {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: blue;
  transition: all 0.6s;
}
.square:hover span {
  height: 100%;
}
.mini-square {
  height: 140px;
  width: 110px;
  z-index: 10;
  position: absolute;
  bottom: 20px;
  left: 70px;
  background: tomato;
}

.mini-square:after {
  content: "";
  position: absolute;
  top: -70px;
  left: -20px;
  border: 75px solid transparent;
  border-top: none;
  border-bottom-color: tomato;
  width: 0;
  z-index: 8;

<div class="square">
  <span></span>
  <div class="mini-square">
  </div>
</div>

【讨论】：

这是我所期望的，但是请您使用伪元素来实现背景图像，因为我必须对不同形状的不同图像使用相同的场景，所以如果这对所有人来说都是共同的，我真的非常感谢你。
@Benjamin：您的图像实现总是会引起问题，主要是因为它们的生成方式。这种功能（伪元素等）可以适应不同的形状。如果不是，那么 SVG 就是答案。
是的，我同意你的看法，并感谢你为成为现在所做的努力。

【解决方案3】：

将background-position 设置为底部会有所帮助：

.bg {
  background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
  height: 250px;
  position: relative;
}

span {
  background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat;
  bottom: 0px;
  height: 0;
  position: absolute;
  right: 0;
  left: 0;
  transition: height .5s;

  background-position: center bottom;
}

.bg:hover span {
  height: 152px;
}

&lt;div class="bg"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;

【讨论】：

这是一个非常聪明的答案，但是当我因为固定位置滚动时，我的内容被固定在相同的位置。
@Benjamin：更新。我发现只指定背景图像的大小可以很好地工作。
你是我的救命稻草，我欠你的正是我想要的。
这与background-image-size 无关，而是与background-image-position: center bottom 有所不同。
@Benjamin：哦，对了！看来我幸运命中了XD

【解决方案4】：

这是我使用 CSS3 转换的方法：

.box{
    width: 300px;
    float: left;
}
.bg {
    background: url(https://raw.githubusercontent.com/xgqfrms-GitHub/webgeeker/gh-pages/CSS3/bg-images-animation/bg1.png) no-repeat center;
    height: 250px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
}
span {
    background: url("https://raw.githubusercontent.com/xgqfrms-GitHub/webgeeker/gh-pages/CSS3/bg-images-animation/bg2.png") no-repeat;
    height: 150px;
    bottom: -150px;
    right: 0;
    left: 0;
    position: absolute;
    /*background-position: center bottom;*/
}
.bg:hover span {
    transform: translateY(-150px);
    transition: all .5s ease 0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-image-scroll</title>
</head>
<body>
    <div class="box">
        <div class="bg">
            <span></span>
        </div>
    </div>
</body>
</html>

demo.gif： 您可以访问以下链接以查看不同的对比演示： http://webgeeker.xyz/CSS3/bg-images-animation/

【讨论】：