我在使用 Angular 2 定义正文背景颜色时遇到问题。我尝试更改 html、正文、容器流体颜色,但它没有改变。我还在我的 app.component.css 中更改了 html 和 body,但它没有用。
我的 css 的其余部分没问题,所以浏览器得到了样式表
应用程序组件.html:
<jogo></jogo>
应用程序组件.css:
html, body{
background-color: pink;
}
jogo.组件
<div class="container-fluid" *ngIf="showPlay">
<div class="row">
<div class="col-xs-8 col-md-8 col-lg-8c">
<p align="center">
Qual é<br/>a<br/>Música?
</p>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4"></div>
<div align="center">
<button type="button" class="rounded-circle">Play</button>
</div>
</div>
</div>
<div class="container-fluid" *ngIf="showJogo">
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3" id="tocador">
Segunda
<audio controls>
<!-- caminho devera ser trocado pelo do firebase? -->
<source src="/assets/Queen - Love of My Life.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3" id="pontos">Pontos</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3" id="tempo">Tempo</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3" id="pergunta">Pergunta</div>
</div>
</div>
jogo.component.css:
body{
background-color: pink;
}
p {
font-family: 'Lobster', cursive;
font-size: 3.0em;
color: #990000;
/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari 3-8 */
transform: rotate(-12deg);
}
button {
background-color: #990000;
color: #F0D1B7;
font-size: 1.5em;
border: none;
border-radius: 35px;
width: 10%;
}
最佳答案
Angular 创建 Shadow Dom用于将样式应用于不同的组件。
要对根元素应用样式,我们可以在根文件夹中使用 style.css。
样式.css
html, body{
background-color: pink;
}
关于html - Angular 2 - CSS 背景颜色不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48000260/