テキスト自体ではなく背景の不透明度を変更します。

ローディング画面を作成しようとしていますが、成功しません。テキスト自体ではなく背景の不透明度を変更します。

アニメーションは見た目に似ていますが、バックグラウンド自体は問題です。不透明度を変更しようとすると、テキストの不透明度も変わります。

@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>

出典

2017-08-01 AESTHETICS

背景色としてRGBAを使用してください。 rgba（a）の4番目のパラメータはアルファチャンネルです - 色の不透明度。アルファは0（完全に透明）と1（不透明）の間の数値です。

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

背景色だけなので、要素の子には影響しません。

@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; 
 
    } 
 
}

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

出典

2017-08-01 08:41:28

ページの他の要素は消え去るでしょうか？ – AESTHETICS

それはちょうど背景色です。 –

右。他の要素が消えていくように、ページの上にビューを作成するにはどうすればよいですか？ – AESTHETICS

あなたは背景色の不透明度を変更しようとしている場合は、単にRGBAとしてみてください。最後の引数は、不透明度

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

出典

2017-08-01 08:44:44

ではなく背景のあなたのCSSクラスで、このプロパティを追加する場合：黒。

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

常にrbgaを使用してください。これにより、透明な色で領域を塗りつぶすことができます。最初の数字はRGB値の色を表し、4番目の数字は0と1の間の透明度値を表します（0は完全に透明、もう1つは完全に不透明です）。私たちは長い間、不透明な性質を持っていましたが、不透明であると、すべての捨てられた要素も透明になり、それと戦う方法はありません。

出典

2017-08-01 09:20:43 Harsh

テキスト自体ではなく背景の不透明度を変更します。

答えて

関連する問題