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

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

http://jsfiddle.net/zeYZL/

我需要用一个简单的 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;

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-03
    • 2014-07-31
    相关资源
    最近更新 更多