CSS加载屏幕问题

时间：2014-11-11 16:17:48

标签： html css

我尝试在用户执行某项操作后显示加载区域。我想在屏幕中央显示加载动画，同时在后台显示页面的其余部分。

此时，我的问题是加载动画也是灰色的，我只是想让背景变灰。白框应该是不透明的，但也有点透明。有什么帮助吗？

＆＃13;
＆＃13; 
$('input[type=button]').click(function() {
  $("#shader").fadeIn();
});
＆＃13; 
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shader {
    width: 100%;
    height: 100%;
    background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    opacity: 0.5;
    display: none;
}

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: white;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>

<div id="shader" class="shader">
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

查看整页以获得更好的观点

6 个答案:

答案 0 :(得分：4)

使用不透明度的rgb背景background-color: rgba(0, 0, 0, 0.65);

您已添加opacity，因此孩子们也会inherit

演示 - http://jsfiddle.net/kw7302rb/ 

.shader {
    width: 100%;
    height: 100%;
    background-color: black; /** change it to this background-color: rgba(0, 0, 0, 0.65) **/
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    opacity: 0.5; /** you can remove this **/
    display: none;
}

＆＃13;
＆＃13; 
$('input[type=button]').click(function() {
  $("#shader").fadeIn();
});
＆＃13; 
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shader {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    display: none;
}

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: white;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>

<div id="shader" class="shader">
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

或类似的东西

＆＃13;
＆＃13; 
$('input[type=button]').click(function() {
  $("#shader").fadeIn();
});
＆＃13; 
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shader {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    display: none;
}

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.65);
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>

<div id="shader" class="shader">
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

另一种解决方案是，您可以使用div

添加额外的opacity

HTML 

<div id="shader" class="shader">
    <div class="overlay"></div>  <!-- new div added which will act as greyed background -->
    <div class="loadingContainer">
        <div id="divLoading3">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
    </div>
</div>

CSS 

.overlay {
    background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity:.5;
    position: fixed;
}

演示 - http://jsfiddle.net/kw7302rb/3/

＆＃13;
＆＃13; 
$('input[type=button]').click(function () {
    $("#shader").fadeIn();
});
＆＃13; 
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.shader {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    display: none;
}
.overlay {
    background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity:.5;
    position: fixed;
}
#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: white;
}
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<div id="shader" class="shader">
    <div class="overlay"></div>
    <div class="loadingContainer">
        <div id="divLoading3">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

＆lt; --------------------------------------- [整个背景灰显] --------------------------------------------＆GT;

在CSS中将background-color: transparent;添加到#divLoading3。

Fiddle 

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

＆＃13;
＆＃13; 
$('input[type=button]').click(function() {
  $("#shader").fadeIn();
});
＆＃13; 
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shader {
    width: 100%;
    height: 100%;
    background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    opacity: 0.5;
    display: none;
}

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>

<div id="shader" class="shader">
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

＆lt; ------------------------------------- [Loader＆＃39;可见] --------------------------------------＆gt;

将background-color: transparent;替换为background-color: #222;

Fiddle 

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

＆＃13;
＆＃13; 
$('input[type=button]').click(function() {
  $("#shader").fadeIn();
});
＆＃13; 
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shader {
    width: 100%;
    height: 100%;
    background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    opacity: 0.5;
    display: none;
}

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #222;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>

<div id="shader" class="shader">
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：3)

问题是你的loadingContainer在你正在褪色的div里面。你需要一个单独的shaderBg div，如下所示：

<div id="shader" class="shader">
    <div class="shaderBg">&nbsp;</div>
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>

看到它的实际效果：

http://jsfiddle.net/CaseyRule/uu9Lhmfz/ 

$('input[type=button]').click(function() {
  $("#shader").fadeIn();
});
.loadingContainer {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shader {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    display: none;
}

.shaderBg {
    width: 100%;
    height: 100%;
    background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    opacity: 0.5;
}

#divLoading3 {
    border-radius: 40px;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: white;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content:"";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content:"";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
<input type="button" value="load button">
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>
<p>background contents background contents background contents</p>

<div id="shader" class="shader">
    <div class="shaderBg">&nbsp;</div>
  <div class="loadingContainer">
    <div id="divLoading3">
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：1)

它似乎对我来说很好，但只有类似你的问题是我看到加载动画背后的任何东西都不是灰色的，但是可见的是更明亮/更暗的颜色。我试着让加载盒的背景为纯色，

答案 4 :(得分：0)

使用此代码

#divLoading3{
    background-color: #060606 !important;
}

有了！important，你可以重写一个属性。

答案 5 :(得分：0)

这是因为您的加载动画位于灰色的容器内。

要解决此问题，您应该将加载动画放在要变灰的容器之外。

<div class="container">...here the bcakground...</div>
<div class="loading"> ... here the animation </div>

查看this示例

相关问题
最新问题