草庐IT

html - CSS 加载屏幕问题

coder 2023-08-08 原文

我试图在用户执行特定操作后显示加载区域。我想在屏幕中央显示加载动画，同时在后台将页面的其余部分显示为灰色。

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

$('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%;
    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);
    }
}
<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>

查看整页以获得更好的 View

最佳答案

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

你已经添加了opacity所以 children 也会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;
}


$('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%;
    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);
    }
}
<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>

或者类似的东西

$('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%;
    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);
    }
}
<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>

另一个解决方案是你可以添加一个额外的 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/ 

$('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;
}
.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);
    }
}
<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>

关于html - CSS 加载屏幕问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26869416/

htmlCSSbackgroundcontentsgt

有关html - CSS 加载屏幕问题的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  3. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  5. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  7. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  10. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

随机推荐