【问题标题】:Background size transition stopped working in chrome背景尺寸过渡在 chrome 中停止工作
【发布时间】:2016-10-15 05:51:12
【问题描述】:

我有一个背景尺寸转换,它突然停止在 chrome 中工作,我不知道为什么。如果您将鼠标悬停在此页面上的某个类别框上,您会明白我的意思:

http://demo.elusivethemes.com/luxi/

它以前可以正常工作,但现在停止了。任何想法为什么?

谢谢,

斯科特

【问题讨论】:

标签: css google-chrome css-transitions


【解决方案1】:

您必须在 .cat-grid 而不是 .cat-grid:hover 中进行转换

webkit-transition: background-size .6s ease;
transition: background-size .6s ease;

【讨论】:

    【解决方案2】:

    改用变换比例:

    .cat-grid {
        background-size: 100%;
        transition: all 1000ms ease;
    }
    
    .cat-grid:hover {
        background-size: 104%;
        transform: scale(.6);
    }
    

    【讨论】:

    • 这似乎缩放了整个盒子,而不仅仅是背景图片
    【解决方案3】:

    使用背景位置和背景大小来制作动画: 检查这个:https://jsfiddle.net/shriharim/8tcbm6zw/

    .thumbnail{
        background-image:url('http://www.quirkybyte.com/wp-content/uploads/2016/02/Green-Nature-Trees-l-730x365.jpg');
        float:left;
        margin:1px;
        width:350px;
        height:350px;
        overflow:hidden;
        background-size:450px 450px;
        background-position:0px 0px;
        background-repeat: no-repeat;
    }
    
    .thumbnail:hover {
        background-size:550px 550px;
        background-position:-50px -50px;
        transition:all 0.5s ;
        -webkit-transition:all 0.5s ;
        -o-transition:all 0.5s ;
        -moz-transition:all 0.5s ;
    }
    

    【讨论】:

    • 谢谢,问题是图像框是动态的,所以我必须使用百分比。可以用百分比来完成吗?
    • 是的,你可以这样做。将背景大小更改为百分比
    【解决方案4】:

    我今天遇到了同样的问题。我有background-size: 300px;:hoverbackground-size:325px;。一时兴起,我尝试在背景尺寸中设置高度和宽度,所以background-size: 300px 300px;:hover 相同,它成功了!

    不确定您将如何处理您的操作方式,背景大小为百分比,但也许这会有所帮助!

    更新:这是 Chromium 中的 known bug

    【讨论】:

      猜你喜欢
      • 2012-03-09
      • 2016-10-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-19
      • 2018-04-07
      • 1970-01-01
      • 2014-07-29
      相关资源
      最近更新 更多