Question

我有下面的代码作为我的网页加载gif但是想知道如何让gif的大小更小？每当我尝试改变大小时，它都会改变整个事物的大小而不是gif本身。

＆＃13;

$(window).load(function() {
    setTimeout(function(){
            $('.loader').fadeOut('slow', function () {
            });
        },1000);
})

＆＃13;

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="loader"></div>

＆＃13;

Answer 1

使用background-size打印所以：

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
    background-size:10%;
}

工作DEMO。

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

P.S。你也可以使用px，em，..

＆＃13;

setTimeout(function() {
  $('.loader').fadeOut('slow', function() {});
}, 1000);

＆＃13;

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
    background-size:10%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="loader"></div>

＆＃13;

改变加载gif的大小

1 个答案: