如何使用CSS删除图像下方的多余空白

Question

/* Typography */

.header {font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.0em; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
p {font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1.0em; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
/* Sizes */

.large-5 {font-size: 5.0em;}
.large-4 {font-size: 4.0em;}
.large-3 {font-size: 3.0em;}
.large-25 {font-size: 2.5em;}
.large-2 {font-size: 1.5em;}
.large-15 {font-size: 1.3em;}

@media screen and (min-width: 768px) {
.large-5 {font-size: 5.0em;}
.large-4 {font-size: 4.0em;}
.large-3 {font-size: 3.0em;}
.large-25 {font-size: 2.5em;}
.large-2 {font-size: 2.0em;}
.large-15 {font-size: 1.5em;}
}

/* Colours */

.white {color: #fff;}
.black {color: #000;}

/* Spacing */

.padding-top {padding-top: 2em;}
.padding-top-double {padding-top: 2em;}
.padding-top-triple {padding-top: 1em;}
.padding-bottom {padding-bottom: 1em;}

/* Links */

a:link, a:visited, a:active {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}

/* General */

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #fff;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/* Structure */

.container {
    background-image: url("img/hd-sunset-river-HD-1200x1920.jpg");
    background-size: cover;
    width: 100%;
    height: 100%;
    border: 5px solid #fff;

}


.content {
    width: 100%;
    max-width: 500px;
    position: relative;
    top: 50%;
    height: 1200px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;

}

.content img {
    max-width: 100%;

}

my-email::after {
content: attr(data-domain);
}

my-email::before {
content: attr(data-user) "\0040";
}

This is my CSS code. 这是我的CSS代码。 I have tried to research the answer before asking the guys on Stack Overflow, I have tried {display: block;} and others but I've had no luck. 在问Stack Overflow上的家伙之前，我曾尝试研究答案，我曾尝试{display: block;}和其他方法，但是我没有运气。 I hope I have made an error with the code as this has caused some headache as I'm still learning from CSS and HTML. 我希望我在代码中犯了一个错误，因为这仍然引起一些头痛，因为我仍在学习CSS和HTML。

<!doctype html>

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Coming Soon</title>
   <link href="css/Main.css" rel="stylesheet"> 

</head>

<body>


   <div class="container">
        <img src="img/hd-sunset-river-HD-1200x1920.jpg" width="1900" height="900">
    </div>
    <section class="content">
        <img src="img/logo.png">
        <img src="img/line.png">
        <p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
        <p class="white padding-top"><span class="header">Email: </span><a href="mailto:Jethwa96@hotmail.co.uk"><my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email></a></p> 
    </section> 





    </body>
</html>

Answer 1

The problem is that you're placing a background in a separate div as an image block and then trying to align div with section . 问题是您要将背景作为图像块放置在单独的div中，然后尝试将div与section对齐。 That's a little backwards and inside-out. 这有点倒退和由内而外。

I suggest setting the background for the section instead and then wrapping inner contents in a div that you can easily position within section 我建议改为设置该section的背景，然后将内部内容包装在一个div ，您可以轻松地将其放置在该section

Section with background, inner div wrapping content: 有背景的部分，内部div包装内容：

<section class="content">

    <div style="width:500px;
                margin:0 auto;
                top:25%;
                position:relative">

       <img src="http://jedesigns.uk/img/logo.png">
       <img src="http://jedesigns.uk/img/line.png">
       <p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
       <p class="white padding-top"><span class="header">Email: </span><a href="mailto:Jethwa96@hotmail.co.uk"><my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email></a></p> 

     </div>

</section>

Then for your section.content CSS, change to: 然后对于您的section.content CSS，更改为：

.content{
    width: 100%;
    position: relative;
    height: 1200px;
    margin: 0 auto;
    background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
}

Here's jsFiddle: http://jsfiddle.net/z22hrvk9/ 这是jsFiddle： http ： //jsfiddle.net/z22hrvk9/

如何使用CSS删除图像下方的多余空白

问题描述

1 个解决方案

解决方案1
0 2015-09-15 18:06:25

如何使用CSS删除图像下方的多余空白

问题描述

1 个解决方案

解决方案1 0 2015-09-15 18:06:25

解决方案1
0 2015-09-15 18:06:25