css - 设置背景图片会破坏提交按钮

Question

在单页应用程序(Angular)上使用以下 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; 的东西。

所有这些都是可用于位置的可用属性:position:static|absolute|fixed|relative|sticky|initial|inherit;

更改该 CSS 属性将帮助您摆脱困境。