Question

我有一个背景视频，我想在它的顶部浮动文字。目前它看起来像这样：

绿色横幅是视频，我希望黑色标题文字漂浮在它的顶部。

具体来说，我希望文本水平和垂直对齐输入。所以它看起来像这样：

这是我到目前为止尝试过的代码......

HTML

  <body>
<!-- banner -->
    <div class="banner">
        <div class="navigation">
            <div class="container-fluid">
                <nav class="pull">
                    <ul class="nav">
                        <li><a href="index.php" class="active"> Home</a></li>
                        <li><a href="#about" class="scroll"> About</a></li>
                        <li><a href="#portfolio" class="menu scroll">Popular Places<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
                            <ul class="nav-sub">
                                <li><a href="#portfolio" class="scroll">Place 1</a></li>                                             
                                <li><a href="#portfolio" class="scroll">Place 2</a></li>                                                                                                
                                <li><a href="#portfolio" class="scroll">Place 3</a></li> 
                            </ul>
                            <script>
                                $( "li a.menu" ).click(function() {
                                $( "ul.nav-sub" ).slideToggle( 300, function() {
                                // Animation complete.
                                });
                                });
                            </script>
                        <li><a href="#events" class="scroll"> Events</a></li>
                        <li><a href="#mail" class="scroll"> Mail us</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="header-top">
            <div class="container">
                <div class="head-logo">
                    <a href="index.php"><span>M</span>ytripplanner</a>
                </div>
                <div class="top-nav">
                    <div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
                        <a href="#"><img src="images/menu.png" alt=""></a>
                    </div>  
                </div>  
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="banner-info">
            <div class="container">
                <h1>Plan Your Trip</h1>
                <div class="sap_tabs">  
                    <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
                          <ul class="resp-tabs-list">
                              <li class="resp-tab-item grid1" aria-controls="tab_item-0" role="tab"><span><i class="glyphicon glyphicon-home" aria-hidden="true"></i>Hotels</span></li>
                              <li class="resp-tab-item grid2" aria-controls="tab_item-1" role="tab"><span><i class="glyphicon glyphicon-glass" aria-hidden="true"></i>Restaurants</span></li>
                              <li class="resp-tab-item grid3" aria-controls="tab_item-2" role="tab"><span><i class="glyphicon glyphicon-heart" aria-hidden="true"></i>Things to do</span></li>
                              <li class="resp-tab-item grid5" aria-controls="tab_item-3" role="tab"><span><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>Shopping</span></li>
                              <div class="clear"></div>
                          </ul>                  
                            <div class="resp-tabs-container">

                                <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
                                    <div class="facts">
                                        <div class="booking-form">
                                            <div class="online_reservation">
                                                    <div class="b_room">
                                                        <div class="booking_room">
                                                            <div class="reservation">
                                                                <ul>        
                                                                    <li  class="span1_of_1 desti">
                                                                         <div class="book_date">
                                                                             <form method="post">


        <div class="dropdownstay">
            <select  name="city" class="option3" id="dropdown" >
                <option  value="1" id="1" style="font-size:20px; font-family:Monotype Corsiva;" >Lahore</option>
                <option value="2" id="2" style="font-size:20px; font-family:Monotype Corsiva;">Dubai </option>
                <option  value="3" id="3"  style="font-size:20px; font-family:Monotype Corsiva;">Newyork</option>
                <option value="4" id="4"style="font-size:20px; font-family:Monotype Corsiva;">Canberra</option>
                <option  value="5" id="5" style="font-size:20px; font-family:Monotype Corsiva;">Kuala Lampur</option>
                <br>

        </select>
        </form>
        <!--end for drop down -->
</div>
                                                                         <?php 
                                                                         session_start();

                                                               $_SESSION['city_id'] = $_POST['index'];  
                                                               ?> 
                                                                         </div>                 
                                                                     </li>
                                                                </ul>
                                                            </div>
                                                            <div class="reservation">
                                                                <ul>    
                                                                     <li  class="span1_of_1">
                                                                         <h5>What you want in hotel?</h5>
                                                                         <br>
                                                                         <form action="checkbox_value.php" method="post">

        <section title="preferences">
      <input type="checkbox" value="is_pool" id="pool" name="check_list[]" checked /> 
      <text style="font-size:20px; font-family: Times New Roman;"> Pool </text>
      <br/>
      <input type="checkbox" value="is_gym" id="gym" name="check_list[]" checked />
      <text style="font-size:20px; font-family: Times New Roman;"> Gym </text>
      <br/>
      <input type="checkbox" value="is_beach" id="beach" name="check_list[]" />
      <text style="font-size:20px; font-family: Times New Roman;"> Beach </text>
      <br/>
      <input type="checkbox" value="is_spa" id="spa" name="check_list[]" />
      <text style="font-size:20px; font-family: Times New Roman;"> Spa </text>
      <br/>
      <input type="checkbox" value="is_wifi" id="wifi" name="check_list[]" checked /> 
      <text style="font-size:20px; font-family: Times New Roman;"> Wifi </text>
      <br/>
      <input type="checkbox" value="is_familyoriented" id="family" name="check_list[]"/>
      <text style="font-size:20px; font-family: Times New Roman;"> Family </text>
      <br/>
      <input type="checkbox" value="is_economical" id="economical" name="check_list[]" />
      <text style="font-size:20px; font-family: Times New Roman;"> Economical </text>
      <br>
      <br>
      <br>
      <br>
  </section>

                                                                                <input type="submit" name="submit" value="Submit" />
                                                                                <?php include 'checkbox_value.php';?>

                                                                             </form>

                                                                     </li>

                                                                     <div class="clearfix"></div>
                                                                </ul>
                                                                    <!---strat-date-piker---->
                                                                        <link rel="stylesheet" href="css/jquery-ui.css" />
                                                                        <script src="js/jquery-ui.js"></script>
                                                                          <script>

                                                                          </script>
                                                                    <!---/End-date-piker---->
                                                            </div>
                                                            <div class="reservation">
                                                                <ul>    
                                                                     <li class="span1_of_3">
                                                                            <div class="date_btn">

                                                                            </div>
                                                                     </li>
                                                                     <div class="clearfix"></div>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                            </div>
                                            <!---->
                                        </div>  
                                    </div>
                                </div>

CSS

<?php
class MyDB extends SQLite3
{
    function __construct()
    {
        $this->open('mytrip.db');

    }
}
$db = new MyDB();
if(!$db){
    echo $db->lastErrorMsg();
} else {

}

$hotelOptions = array('is_pool', 'is_gym', 'is_spa', 'is_wifi', 'is_beach', 'is_familyoriented', 'is_economical');
$countOptions = array(
    'is_pool' => 'pool_count',
    'is_gym' => 'gym_count',
    'is_spa' => 'spa_count',
    'is_wifi' => 'wifi_count',
    'is_beach' => 'beach_count',
    'is_familyoriented' => 'family_count',
    'is_economical' => 'econo_count',
);
//$cities = array(1 => 'Dubai');


if (isset($_POST['submit'])) {
   // $selected_city= $_POST['city'];
    if (!empty($_POST['check_list']) && is_array($_POST['check_list'])) {
        $profpic = "images/Yellow.jpg";
        //echo "<p> Destination: ".$selected_city ."</p>";
        // Counting number of checked checkboxes.
        $checked_count = count($_POST['check_list']);
        echo "You have selected following ".$checked_count." option(s): <br/>";
        // Loop to store and display values of individual checked checkbox.
        $where = '';
        $order = '';
        foreach($_POST['check_list'] as $selected) {
            echo "<p>".$selected ."</p>";
            if (array_search($selected, $hotelOptions) !== false) {
                $where .= " AND {$selected} = 1";
                $order .= " {$countOptions[$selected]} DESC,";
            }
        }
        $where = substr($where, 5, strlen($where));
        $order = substr($order, 0, strlen($order) - 1);
        //echo "<p>".$where ."</p>";
        //echo "<p>".$order ."</p>";
        session_start();
        $id=$_SESSION['Id'];
        $selected_city=$_SESSION['city_id'];
        if (isset($selected_city)) {

          // $sql = "SELECT hotel_name FROM ".$selected_city." WHERE ".$where." ORDER BY ".$order.";";
              $sql = "SELECT hotel_name FROM hotel WHERE ".$where." AND city_id= "$.selected_city." ORDER BY ".$order.";";
           // echo "<p>".$sql ."</p>";
            $ret = $db->query($sql);
            $ar= array();
            $i=0;
            while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
                echo "<p> <br /></p>\n";
                echo "\n". $row['hotel_name'] . "\n";
                $ar[$i]= $row['hotel_name'];
                $i++;
            }


            if (is_array($ar))
             {
                foreach ($ar as $value)
                {
                   echo "<p> Array is " .$value. "<p>";
                   $sql= "INSERT INTO Search (Id, History)
      VALUES ('$id','$value')";
                   $ret = $db->query($sql);
                }
            }


        }
    } else {
        echo "<b>Please Select Atleast One Option.</b>";
    }
    $db->close();
}

?>

<html>
<head>
<style type="text/css">

body {
background-image: url('<?php echo $profpic;?>');
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>
</body>
</html>

我已经尝试过使用绝对和相对定位以及浮动，我想要输入文本我需要添加表格元素吗？

我在这里获得了标题图片的帮助：http://ideedev.co.uk/newseed/design/但我不能为我的生活让它使用视频......＆lt;＆lt; - 这是唯一的部分，我已经使用图像实现了它，但我无法使用相同的视频方法。如果他们遇到同样的问题，这将有助于他人。

Answer 1

您希望使用绝对定位，并且可以使用top: 50%; left: 50%; transform: translate(-50%,-50%);将其居中。

.homepage-video, .homepage-video video {
  position: relative;
}
.homepage-video video {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
}

.text-over-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

<div class="homepage-video">
  <video autoplay loop muted>
    <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">
  </video>
  <div class="text-over-video">
    <h1>HEADING TEXT GOES HERE</h1>
  </div>
</div>

H1文本高于HTML5视频

1 个答案: