Html 使用相同Laravel布局时的不同背景图像_Html_Css_Laravel_Laravel 4_Blade

Html 使用相同Laravel布局时的不同背景图像

html css laravel laravel-4

Html 使用相同Laravel布局时的不同背景图像,html,css,laravel,laravel-4,blade,Html,Css,Laravel,Laravel 4,Blade,我的laravel应用程序有一个布局。我有四个视图扩展了这个布局。但是，我希望每个视图都有不同的背景图像我的Layout.blade.php文件如下所示： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TITLE</title> <link rel="stylesheet" href="{{ ass

我的laravel应用程序有一个布局。我有四个视图扩展了这个布局。但是，我希望每个视图都有不同的背景图像

我的Layout.blade.php文件如下所示：

<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
</head>
<nav>
<!-- NAV STUFF HERE -->
</nav>
<body>

<div class="container">

    @yield('content')
</div>
</body>
</html>

body{
    background-image: url('/images/image.png');
    background-size: cover;
}

.view_parent_image1{
    background-image: url('/images/image1.png');
    background-size: cover;
}

.view_parent_image2{
    background-image: url('/images/image2.png');
    background-size: cover;
}

// View 1
@extends('layouts.master')

@section('content')
    <div class='view_parent_image1'>

    </div>
@stop

这种造型技术不言而喻地为每个视图提供了相同的背景图像，这是我不想要的。我希望能够为每个视图设置不同的背景图像

那么，如何设置每个页面具有不同的背景图像，但仍然保持它们的功能，以扩展公共布局？谢谢。

不要将

车身设计成这样：
<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
</head>
<nav>
<!-- NAV STUFF HERE -->
</nav>
<body>

<div class="container">

    @yield('content')
</div>
</body>
</html>

body{
    background-image: url('/images/image.png');
    background-size: cover;
}

.view_parent_image1{
    background-image: url('/images/image1.png');
    background-size: cover;
}

.view_parent_image2{
    background-image: url('/images/image2.png');
    background-size: cover;
}

// View 1
@extends('layouts.master')

@section('content')
    <div class='view_parent_image1'>

    </div>
@stop

将样式应用于视图的父元素，如下所示：
<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
</head>
<nav>
<!-- NAV STUFF HERE -->
</nav>
<body>

<div class="container">

    @yield('content')
</div>
</body>
</html>

body{
    background-image: url('/images/image.png');
    background-size: cover;
}

.view_parent_image1{
    background-image: url('/images/image1.png');
    background-size: cover;
}

.view_parent_image2{
    background-image: url('/images/image2.png');
    background-size: cover;
}

// View 1
@extends('layouts.master')

@section('content')
    <div class='view_parent_image1'>

    </div>
@stop

然后像这样使用它：
<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
</head>
<nav>
<!-- NAV STUFF HERE -->
</nav>
<body>

<div class="container">

    @yield('content')
</div>
</body>
</html>

body{
    background-image: url('/images/image.png');
    background-size: cover;
}

.view_parent_image1{
    background-image: url('/images/image1.png');
    background-size: cover;
}

.view_parent_image2{
    background-image: url('/images/image2.png');
    background-size: cover;
}

// View 1
@extends('layouts.master')

@section('content')
    <div class='view_parent_image1'>

    </div>
@stop

更新：另一种方法：
// In your master layout
<body class='{{ $bodyClass or "default" }}'>

CSS:
.default { ... }
.imageOne { ... }

您还可以从BaseController
共享全局变量：
View::share('bodyClass', 'imageOne');

最后（可能是最好的）您可以创建视图生成器来自动设置视图的类
：
View::composers(array(
    'ViewComposers@homeViewComposer' => 'home.index',
    'ViewComposers@aboutViewComposer' => 'about.index',
));

class ViewComposers {
    public function homeViewComposer($view)
    {
        return $view->with('bodyClass', 'homeViewClass');
    }

    public function aboutViewComposer($view)
    {
        return $view->with('bodyClass', 'aboutViewClass');
    }
}

CSS
.homeViewClass { ... }
.aboutViewClass{ ... }

如果您需要有关如何创建以及在何处放置视图生成器的详细信息，您可以。
这很有效，只是背景图像仍然卡在我在主布局文件中定义的容器中。因此背景不会填满整个屏幕。我还试着在容器上方生成一个只用于背景的部分。这似乎也不起作用。我应该在每个单独的视图中定义容器吗？您还可以通过视图将css类/id
传递给布局，并在正文中使用该类，每个类可以携带不同的背景图像
。您还可以在所有视图中共享一个全局变量accross，并使用该var
携带css类
name。