Блог

Главная - Вопросы по программированию - Настройка фонового изображения нарушает работу кнопки отправки

Настройка фонового изображения нарушает работу кнопки отправки

#css #angular

#css #угловой

Вопрос:

Используйте следующий CSS для установки фонового изображения в одностраничном приложении (Angular)

 .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 должно конфликтовать?

Комментарии:

1. Я уверен, что такая вещь не называется position: center; . Все это доступные свойства, которые можно использовать с position: position: static|absolute|fixed|relative|sticky|initial|inherit; .

2. Да! Это была проблема. Я изменил position: relative; для кнопки #submit, и это устранило проблему. Если вы хотите ввести это в качестве ответа, я приму. Спасибо!

3. Я был бы признателен за это, рад, что это сработало для вас.

4. Я предполагаю, что вы думали, что могли бы центрировать, как вы делаете с помощью text-align? Хотел бы я, чтобы css был таким простым!

Ответ №1:

Я уверен, что такая вещь не называется position: center; .

Все это доступные свойства, которые можно использовать с position: position:static|absolute|fixed|relative|sticky|initial|inherit;

Изменение этого свойства CSS поможет вам.