показать конкретное изображение в качестве фона водяного знака на моем blade.php? Laravel - PullRequest
0 голосов
/ 08 ноября 2019

Я хочу сделать водяной знак на определенной странице моего проекта.

Я пишу это в app.css

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("../images/SystemLogo.png");
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: repeat;
  opacity: 0.7;
}

, и это мой клинок

@extends('layouts1.index')

@section('content')

<div class="container">
  <head>
<meta charset="UTF-8">
</head>

  <body>
    <div class="watermarked">
  <div class="text-center">

     <h2 class="text-center"> Appri=oval report </h2>
      <form method="post" action="/student/share-approval/{{$approval->uniid}}">
         @csrf
<p lang="ar" dir="rtl">
  // here is the  approval report 
</p>
<button type="submit" class="btn btn-primary">share the report </button>
</div>
</div>
       </body>
    </form>
  </div>
@endsection

Проблема заключается в том, что водяной знак не отображается как изображение, которое я хочу ... в результате получается фон по умолчанию. Как я могу показать изображение в качестве фона?

1 Ответ

0 голосов
/ 09 ноября 2019

Я думаю, ваш HTML отформатирован неправильно. Конечный тег формы и div находятся ниже тега body.

Попробуйте:

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("https://en.opensuse.org/images/4/49/Amarok-logo-small.png");
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: repeat;
  opacity: 0.7;
}
<div class="watermarked">
  <div class="text-center">
    <h2 class="text-center">Stuff here</h2>
      <form method="post" action="/#">
      <p>
        A Form here
      </p>
      <button type="submit" class="btn btn-primary">Button</button>
      </form>
  </div>
</div>
 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...