Question

我想在项目的特定页面上做水印。

我在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

问题不显示水印，因为我想要的图像..结果是默认背景。如何将图片显示为背景？

Answer 1

我认为您的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>

在我的blade.php上显示特定图像作为水印背景？拉拉韦尔

1 个答案: