Question

我有一个H2（id = cover），我想使其居中并在背景图像中更高，但是随着页面尺寸的缩小，它最终会下降到图像的底部，然后从上面掉下来我的Android手机。任何帮助，将不胜感激。这是代码

<!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>Johnson Landscaping</title>
    <link rel="stylesheet" href="style.css">
</head>
<div id="container">
<header>
    <h1>Johnson Landscaping</h1>
<nav>
<ul class="menu">
    <li><a href="index.html">home</a></li>
    <li><a href="contact.html">contact us</a></li>
</ul>
</nav>
</header>
<div>
    <div class="image">

        <img src="images/background-backlight-blur-color-262713.jpg" alt="" />

            <h2 id="cover"><span>Quality Garden Care on the North Shore</span></h2>

    </div>
<h2>Services</h2>
    <div class="Services">
        <h4>Garden Maintenance</h4>
        <img src="images/person-holding-a-green-plant-1072824.jpg" alt="person holding green 
plant">
            <p>Enter Details</p>
    </div>
    <div class="Services">
        <h4>Garden Design</h4>
        <img src="images/blade-of-grass-depth-of-field-environment-garden-580900.jpg" alt="blades of 
grass">
        <p>Enter Details</p>
    </div>
    <div class="Services">
        <h4>Tree and Shrub Pruning</h4>
        <img src="images/apple-tree-6035.jpg" alt="apple tree">
        <p>Enter Details</p>
    </div>
    <div class="Services">
        <h4>Pressure Washing</h4>
        <img src="images/photography-of-bricks-covered-with-moss-1089280.jpg" alt="bricks 
covered in moss">
        <p>Enter Details</p>
    </div>
</main>
</div>
<footer>
    <nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="contact.html">contact us</a></li>
    </ul>
    </nav>
</footer>
</body>
</html>

和css一起使用

html {
background: #f7f7f7;
color: #7cae49;
font-family: 'garamond', sans-serif;
}

body {
background: white;
margin: 0 auto;
font-family: 'garamond', sans-serif;
color: rgb(49, 46, 46);
text-align: center;
}

h1 {
float: none;
display: inline-block;
color: #5c7e3a;
width: 100%;
font-size: 50px;
text-align: center;
}

nav, li {
    display: inline-block;
}

header, footer {
    background: #DAF7A6;
    color: #7cae49;
    border-radius: 10px;
}

footer {
    text-align: center;
    padding: 30px 20px;
}

li {
    list-style: none;
    line-height: 20px;
    font-size: 40px;
    padding-right: 20px;
    padding-top: 5px;
}

.image { 
    position: relative; 
    height: 60;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
 }

 #cover { 
    position: absolute; 
    top: 200px; 
    width: 100%; 
    color: white;
    text-align: center;
    vertical-align: middle;
    display: flex, inline-block;
    font-size: 20px;
 }

a {
    text-decoration: none;
    color: inherit;

}

a:hover {
    color: #0e69e9;
}

h2 {
    color: #7cae49;
    text-align: center;
    font-size: 30px;
}

.Services {
    box-sizing: border-box;
    width: 90%;
    margin: 5px;
    padding: 5px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    color: #7cae49;
}

img {
    max-height: 60%;
    max-width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;

}

感谢您的光临。干杯！

Answer 1

尝试一下。在#cover中的style.css中，将最高值更改为0px;

#cover { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    color: white;
    text-align: center;
    vertical-align: middle;
    display: flex, inline-block;
    font-size: 20px;
 }

文字不在手机的背景图片中

1 个答案: