Question

我到处搜索但找不到任何解决方案。背景图像没有出现。我的代码写在下面。我尝试了所有尝试但都失败了。有人可以帮助我吗？

@extends('layouts.app')

@section('content')

 <!DOCTYPE html>
   < html>

  < head>

   < title>fullscreen image background

   < /title>
   < style>

       html{ 

           background:url('fee.jpg')no-repeat center center fixed;
           -webkit-background-size:cover;
           -moz-background-size:cover;
           -o-background-size:cover;
           background-size:cover;

       }
       body{
           color: #FFFFFF;

       }

   </style>

  </head>
  <body>
  <p style="text-align: center;">This is a fullscreen background </p>
  </body>
  </html> 

@endsection````

Answer 1

问题是您在<和标记名称之间放置了空格。因此，删除所有空格，它将起作用。

Answer 2

当我将代码粘贴到我的本地面（崇高）时，我看到间距问题。您在html，head，title，title close和style标签中放置了额外的空间，即（请勿这样做）。它不采用html标记格式的内容。因此无法使用。请删除该空间。

尝试此方法：

 <!DOCTYPE html>
   <html>

  <head>

   <title>fullscreen image background

   </title>
   <style>

       html{ 

           background:url('fee.jpg')no-repeat center center fixed;
           -webkit-background-size:cover;
           -moz-background-size:cover;
           -o-background-size:cover;
           background-size:cover;

       }
       body{
           color: #FFFFFF;

       }

   </style>

  </head>
  <body>
  <p style="text-align: center;">This is a fullscreen background </p>
  </body>
  </html>

谢谢

Answer 3

尝试background-image：url（“ fee.jpg”）;

在html中添加背景图片时遇到问题

3 个答案: