CSS 背景图片大小转换

CSS Background image size transition(CSS 背景图片大小转换)

本文介绍了CSS 背景图片大小转换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

I am working on a simple markup with resizing a div's background img. See the fiddle:

http://jsfiddle.net/zeYZL/

I need this to be animated with a simple CSS transition. and I tried doing this:

#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;

}

But then the background image clips upon the hover. (See http://jsfiddle.net/5Hm9u/)

Any tips on how to fix it?

Greetings, Chris

解决方案

JSFiddle

You need to put background properties outside the hover too, so it knows what to return to when not on hover.

e.g.

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

And if you want it to transition on mouseover and when you take the mouse off, you put the transition on .tile and not .tile:hover

JSFiddle

Side note

You should avoid using inline styles where you can use a stylesheet. Put your background image in .tile rather than using the style attribute.

Full 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;
}

这篇关于CSS 背景图片大小转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS 背景图片大小转换

基础教程推荐