Question

我正在尝试创建加载屏幕，但没有成功。

动画看起来与它看起来完全一样，但是当我试图改变不透明度时，背景本身也是一个问题，文本的不透明度也会发生变化。

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
.yes
{
   background:black ;

}
.loading {
  font-family: PT Sans Narrow;
  font-weight: bold;
  font-size: 30px;
 color:black;
   top: 45%;
   left: 45%;
   
  position: absolute;
  color:white !important;
}

.loading:after {
  

 overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(5,end) 1000ms infinite;      
  animation: ellipsis steps(5,end) 1000ms infinite;
  content: "...."; /* ascii code for the ellipsis character */
  width: 0px;


}

@keyframes ellipsis {
  to {
    width: 0.9em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1em;    
  }
}

<body class="yes">



<p class=" loading ">Loading</p>
</body>

Answer 1

使用RGBA作为背景颜色。 responsiveHeight（a）的第4个参数是alpha通道 - 颜色的不透明度。 alpha是0（完全透明）和1（不透明）之间的数字。

rgba

由于它只是背景颜色，因此不会对元素的任何子元素产生影响。

＆＃13;

background: rgba(0, 0, 0, 0.5);

＆＃13;

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');

body {
  margin: 0;
  background: url(http://lorempixel.com/1200/600);
  background-size: cover;
}

.yes {
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.loading {
  font-family: PT Sans Narrow;
  font-weight: bold;
  font-size: 30px;
  color: black;
  top: 45%;
  left: 45%;
  position: absolute;
  color: white !important;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(5, end) 1000ms infinite;
  animation: ellipsis steps(5, end) 1000ms infinite;
  content: "....";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 0.9em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1em;
  }
}

＆＃13;

Answer 2

如果您尝试更改背景颜色的不透明度，请尝试使用RGBA。最后一个参数是不透明度

background-color: rgba(0, 0, 0, 0.5);

Answer 3

在css类中添加此属性，而不是 background：black ;

.yes{background: rgba(0,0,0,0.6); }

始终使用rbga。这使我们可以填充透明色的区域;第一个数字表示RGB值中的颜色，第四个表示0到1之间的透明度值（零是完全透明的，一个是完全不透明的）。我们长期以来一直有不透明属性，这是相似的，但不透明度迫使所有后代元素也变得透明，没有办法对抗它

改变背景的不透明度，但不改变文本本身。

3 个答案: