阻止php出现在背景图像上方

时间:2017-11-02 15:04:49

标签: php html css

我的php脚本内容出现在我的背景图片上方,即使背景图片设置在我的CSS内的html标签内,我怎样才能让图像在文本后面

Image:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Secret Diary</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <?php
  session_start();
  if (array_key_exists("id", $_COOKIE)){
    $_SESSION['id'] = $_COOKIE['id'];
  }
  if(array_key_exists("id", $_SESSION)){
    echo "Logged In! <a href='index.php?logout=1'>Log Out</a>";
  } else {
    header("location: index.php");
  }
  ?>

</head>
  <body>

  </body>
</html>

的CSS:

    html{
    background: url("../img/bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.center{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  }

2 个答案:

答案 0 :(得分:4)

const createService = require('feathers-mongoose'); const createModel = require('../../models/businesses.model'); const hooks = require('./businesses.hooks'); module.exports = function (app) { const Model = createModel(app); const paginate = app.get('paginate'); const options = { name: 'businesses', Model, paginate }; // Initialize our service with any options it requires app.use('/', createService(options)); // Get our initialized service so that we can register hooks and filters const service = app.service('/'); service.hooks(hooks); app.publish(() => { // Here you can add event publishers to channels set up in `channels.js` // To publish only for a specific event use `app.publish(eventname, () => {})` // e.g. to publish all service events to all authenticated users use // return app.channel('authenticated'); }); }; 放在PHP标记

之间
<body>

还要将css行<?php session_start(); if(array_key_exists("id", $_COOKIE)){ $_SESSION['id'] = $_COOKIE['id']; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Secret Diary</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <?php if(array_key_exists("id", $_SESSION)){ echo "Logged In! <a href='index.php?logout=1'>Log Out</a>"; } else { header("location: index.php"); } ?> </body> </html> 更新为html{而不是

body

答案 1 :(得分:2)

而不是在您执行它的地方回显PHP,将其存储以供日后使用。您当前的方法(当你继续回声)将导致代码困难,就像你现在经历的那样。

if(array_key_exists("id", $_SESSION)){
    $loggedinText = "Logged In! <a href='index.php?logout=1'>Log Out</a>";
} 
/*
   All your content here,
   and when you're ready for it:
*/
echo $loggedinText;

Offtopic:如果将html和PHP分成单独的文件,这被认为是一种很好的做法。您将html放在一个html文件中,并使用file_get_contents将其放入一个变量中。

if(array_key_exists("id", $_SESSION)){
    $loggedinText = "Logged In! <a href='index.php?logout=1'>Log Out</a>";
    $template = file_get_contents("example.html");
    // Here you do ALL YOUR OTHER LOGIC
    // _nothing_ should echo here, until:
    // And then only at the end of your file:
    echo $template;
} else{
    header("Location: not_logged_in.html");
}

正如您所看到的,您可以轻松阅读 functionallity ,而不会分散您的注意力。现在只有登录用户甚至可以看到您的模板。从安全角度来看,这也会有所帮助。