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;

}

这只是我练习和学习新的

enter image description here

Answer 1

删除display-inline CSS属性并尝试它。

margin-top在css中的背景图像上工作

1 个答案: