在基于引导的刀片模板中添加背景图像
Posted
技术标签:
【中文标题】在基于引导的刀片模板中添加背景图像【英文标题】：Adding a background image in a bootstrap based blade template 【发布时间】：2020-03-05 10:20:38 【问题描述】：我有一个 laravel 应用程序。
我在前端使用引导程序和刀片模板。
我想为我的登录页面添加背景图片。
我正在尝试通过将背景图像放在正文中来设置页面样式。但它不工作，因为图像没有显示
下面是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
</head>
<style>
body
background-image: url('/images/gym_background.jpg');
</style>
<body>
@include('partials.header')
<div class="container">
@yield('content')
</div>
</body>
</html>
在我的 chrome 控制台中，我没有看到任何未加载图像的错误。
内容部分的代码
@extends('layouts.master')
@section('content')
<div class="row">
<div class="col-md-12">
<h3>Welcome to your neighourbood Gym</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Plans</h1>
<p>Plans available in our gym!</p>
<p><a href=" route('blog.plans', ['id' => 1]) ">Click to view</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Gallery</h1>
<p>Have a look around our gym</p>
<p><a href=" route('blog.post', ['id' => 2]) ">Click to view</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Contact us</h1>
<p><a href=" route('contact.create') ">Click for more details</a></p>
</div>
</div>
@endsection
最好的问候，
苏拉夫
【问题讨论】：
【参考方案1】：鉴于以下文件夹结构：
`/public/images/gym_background.jpg`
改变这个：
<style>
body
background-image: url('/images/gym_background.jpg');
</style>
到这里：
<style>
body
// Add a . in front to look in the right folder + dropping the double
background-image: url('./images/gym_background.jpg');
</style>
这里是关于relative vs absolute 路径的好书，供好奇的人阅读。
【讨论】：
【参考方案2】：如果您没有看到图像并且网络检查器中没有 404 错误，那么您的图像可能隐藏在占据整个屏幕并具有纯色（白色？）背景的其他元素下。尝试在 div.container 上设置相同的 CSS，然后它应该可以工作。
UPD：从头开始，问题是花括号。如果您删除那些 和 ，它将起作用。
【讨论】：
我刚刚注意到你有 和 ，删除它 图片到底在哪里？是在/public/images/gym_background.jgp 吗？如果你得到 404，这意味着 url 是错误的，所以你需要正确引用图像。尝试在浏览器选项卡中打开它。
正如@PavelLint 提到的，您可能没有正确引用文件夹结构。您应该尝试他们提到的故障排除方法。另外 - 尝试在 /images 前面添加 .
例如，存储在您的public 文件夹中的图像可以通过访问http://your-site.com/gym_background.jpg 来引用。
@UkraineInTheMembrane 感谢您的回复...添加“。”工作...以上是关于在基于引导的刀片模板中添加背景图像的主要内容，如果未能解决你的问题，请参考以下文章