Question

具有以下CSS可以在单页应用（角度）上设置背景图片

.page::before {
  content: '';
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/weird.png");
  opacity: 0.2;
}
...
/* button */
#submit-button {
  position: center;
  background: #000000;
  border-radius: 5px;
  font-size: 15px;
  padding: 15px 15px 15px 15px;
  margin: -15px 15px 15px 15px;
  color: white
}

这是html：

<div class="page">
<h1 class="sunrise">Asheville Ipsum</h1>
<h2 class="sunrise">Asheville Infused Lorem Ipusm Generator</h2>
  <h3 class="sunrise">Ditch that boring ipsum for some auto-generated, beer infused,</h3>
  <h3 class="sunrise">funky smelling, hippster weirdness.</h3>
<div class="inputs">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group" id="short-medium-long">
    <mat-radio-group aria-label="Select an option" formControlName="numberOfWords" class="form-control" >
      <mat-radio-button value="50">Short</mat-radio-button>
      <mat-radio-button value="75">Medium</mat-radio-button>
      <mat-radio-button value="100">Long</mat-radio-button>
    </mat-radio-group>
  </div>
  <div class="form-group" id="numberOfParagraphs">
    <label>Number of Paragraphs</label>
    <input type="number" id="number-field" formControlName="numberOfParagraphs" class="form-control" />
      <mat-checkbox formControlName="moreBeer" class="form-control">More Beer!</mat-checkbox>
</div>
  <div class="form-group">
      <button class="btn btn-primary" id="submit-button">Generate Weirdness</button>
  </div>
</form>
</div>

<div class="content" *ngFor="let paragraph of paragraphs">{{ paragraph }}<br><br></div>
</div>

添加了此CSS之后，提交按钮将不再起作用。没有控制台错误或任何东西。另外，我可以删除内容或位置属性，并且在不再显示背景图片时可以正常工作。

我觉得CSS中的某些内容一定有冲突？

Answer 1

我确定没有所谓的position: center;。

一起使用的可用属性。

更改CSS属性会帮助您。

设置背景图片中断提交按钮

1 个答案: