CSS 背景图片大小转换答案

【问题标题】：CSS Background image size transitionCSS 背景图片大小转换
【发布时间】：2014-06-16 16:43:26
【问题描述】：

我正在做一个简单的标记，调整 div 的背景 img 的大小。见小提琴：

我需要用一个简单的 CSS 过渡来制作动画。我试着这样做：

#tile:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;

}

但是背景图像会在悬停时剪辑。（见http://jsfiddle.net/5Hm9u/）

关于如何修复它的任何提示？

你好，克里斯

【问题讨论】：

由于某种原因，stackoverflow 不允许我向大家打招呼

标签： css background hover transition

【解决方案1】：

JSFiddle

您还需要将background 属性放在hover 之外，这样它就知道在不悬停时要返回什么。

例如

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-position:0px 0px;
}

如果您希望它在鼠标悬停时进行转换，并且当您将鼠标移开时，请将转换设置为 .tile 而不是 .tile:hover

JSFiddle

旁注

您应该避免在可以使用样式表的地方使用内联样式。将您的背景图片放在.tile 中，而不是使用style 属性。

完整的 CSS：

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-image:url(http://www.placehold.it/450x450);
  background-position:0px 0px;
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
}

.tile:hover {
  background-size:550px 550px;
  background-position:-50px -50px;
}

【讨论】：

@ChrisHolstein 不用担心！很高兴我能帮上忙！

【解决方案2】：

您有应提取到初始 CSS 状态的内联 CSS。

JSfiddle

.tile{
    float:left;
    margin:1px;
    width:450px;
    height:450px;
    overflow:hidden;
    background-image:url(http://www.placehold.it/450x450);
    -webkit-background-size: 450px;
    background-size: ;
    background-position: center;
    transition:all 0.5s ease;

}
.tile:hover {
    background-size:550px 550px;

}

【讨论】：