邊距頂部不適用於CSS中的背景圖像

Question

<title>food</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
            <div class="row">
            <div class="logo">
            <img src=""/>   

            </div>
            <ul class="main-nav">
                <li> <a href="" class="main_menu_second">Food Delivery</a></li>
                <li> <a href="" class="main_menu_second">Food orders</a></li>
                <li> <a href="" class="main_menu_second">Our Cities</a></li>
                <li> <a href="" class="main_menu_second">Services</a></li>

            </ul>

        </div>
    <div class="hero">
        <h1>Welcome To <br> Luke's LandScaping Services</h1>
        <div class="button-awesome">
        <a href="" class="btn btn-half">Show me more</a>
        <a href="" class="btn btn-full">I'M Hungry</a>

        </div>

    </div>  

    </header>

<section class="features">


    <h3 class="text-centre">Professional Gardening Services Designed to Suit Your Preferences </h3>
    <p class="copy">

    </p>
    <div class="container">
    <div class="row">
    <div class="col-md-3">
        <i class="fa fa-certificate"></i>
        <h4> Have Healthy Meals</h4>
        <p class="arranging">

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in

        </p>


    </div>      

<div class="col-md-3">
    <i class="fa fa-camera"></i>
    <h4> Have Healthy Meals</h4>
        <p class="arranging">

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in

        </p>


    </div>      

    <div class="col-md-3">
        <i class="fa fa-envelope"></i>
        <h4> Have Healthy Meals</h4>
        <p class="arranging">

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in

        </p>


    </div>      

    <div class="col-md-3">
        <i class="fa fa-cog"></i>
        <h4> Have Healthy Meals</h4>
        <p class="arranging">

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in

        </p>


    </div>      
        </div>          

    </div>


</section>  


    <section class="meal">
        <ul class="meal-showcase">

            <li>
            <figure class="meal-photo">
                <img src="17.jpg">




            </figure>   

                </li><li>
            <figure class="meal-photo">
                <img src="17.jpg">

                </figure>   
            </li>


            <li>
            <figure class="meal-photo">
                <img src="17.jpg">
                </figure>   

                </li><li>
            <figure class="meal-photo">
                <img src="17.jpg">
                </figure>   

                </li><li>
            <figure class="meal-photo">
                <img src="17.jpg">
                </figure>   

                </li><li>
            <figure class="meal-photo">
                <img src="17.jpg">
                </figure>   

            </li>
            <li>
            <figure class="meal-photo">
                <img src="17.jpg">
                </figure>   

            </li>
            <li>
            <figure class="meal-photo">
                <img src="17.jpg">
                </figure>   

            </li>
        </ul>



    </section>



    <section class="area">
        <h3 class="text-centre"> We Are Currently In These Areas</h3>

    </section>

</body>

試圖從圖像中獲取頁邊距以將其分開，但由於某些原因無法正常工作

嘗試谷歌搜索並且沒有幫助我失去哈

.area {

background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(lawnGarden.jpg);
height:100vh;
background-position:center;
background-size:cover; 
background-attachment: fixed;
display:inline-block
margin-top:100px;

}

這只是我練習和學習的新方法

在此處輸入圖片說明

Answer 1

刪除display-inline CSS屬性並嘗試。

邊距頂部不適用於CSS中的背景圖像

問題描述

1 個解決方案

解決方案1
0 2017-08-02 11:49:40

邊距頂部不適用於CSS中的背景圖像

問題描述

1 個解決方案

解決方案1 0 2017-08-02 11:49:40

解決方案1
0 2017-08-02 11:49:40