时间戳

首页 > 解决方案 > 在 CSS 中更改图像的不透明度

css - 在 CSS 中更改图像的不透明度

问题描述

如何将图像的不透明度从 0.5 设置为 1？我正在制作一个启动画面，我希望我的网站在图像的不透明度达到 1 时进行更改。这是我的代码：

.preload{
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
}
.logo {
  display: block;
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  opacity: 0.5;
}
<div class = "preload" id="preload">
  <div class ="logo">
    <img src = "https://www.gstatic.com/webp/gallery/5.sm.jpg" class = "logo">
  </div>
</div>

标签： csssplash-screenopacity

解决方案

您可以使用 CSSanimation属性。尝试这个：

.preload{
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
}
.logo {
  display: block;
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: example 3s linear infinite;
}
@keyframes example {
  0%   {opacity: 0.0;}
  25%  {opacity: 0.25;}
  50%  {opacity: 0.50;}
  75%  {opacity: 0.75;}
  100% {opacity: 1;}
}
<div class = "preload" id="preload">
  <div class ="logo">
    <img src = "https://www.gstatic.com/webp/gallery/5.sm.jpg" class = "logo">
  </div>
</div>

推荐阅读