Question

我正在尝试删除标题照片周围的空白，该空白应覆盖整个页面。我正在计算机（本地主机）上运行本地服务器以测试此PHP文件。

我已经尝试了所有可以在Stack Overflow上找到的相关答案。我查找了多个线程并执行以下操作： 1）通过更改边距和填充为0来重置CSS样式 2）将图片标签与正文标签包围起来，现在应将其重置 3）将宽度设置更改为100％，将高度设置为自动

index.php：

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container">
    <img class="image" 
src="https://cdn.shopify.com/s/files/1/0533/2089/files/header- 
design-position-absolute_fcabc9a2-0fdb-4057-a6fb-f84f16840eba.png? 
v=1507118933" alt="Header Picture">
    <div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
    </div>
</body>
<html>

style.css：

* { 
    margin:0; 
    padding:0; 
}
/* container holding both the header photo and text */
.container {
     position: relative;
     text-align: center;
     color: white;
} 
/* main header image */
.image {
    filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
    width: 100%;
    height: auto;
}
/* name text */
.name {
    position: absolute;
    top: 17.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 600%;
    font-weight: bold;
    overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
    position: absolute;
    top: 23.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 200%;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

我想要的是在图片周围没有空白，以使其延伸到整个页面。相反，我一直在无法摆脱的边缘周围留出空白。

Upadte 我现在正在实施一些更改，并了解为什么这个简化版本突然起作用。它一定是我其余代码中的内容（未包括在内）。让我先用其余代码重新更新此代码。

Answer 1

在本地和jsfiddle上测试时，此方法工作正常。但是，您的HTML缺少<head>标签。 CSS <link>应该放在其中。

Answer 2

我在这里的第一个建议是使用background-image CSS属性，这样您就可以更好地控制图像框，然后可以设置实际的页面正文或部分来呈现图像。

.your-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

要注意的一件事是，屏幕阅读器中包含<img>标签，而背景图片则没有，这使您的网站对那些使用屏幕阅读器作为背景的用户而言更加友好，与内容无关。

要考虑的一件事是，所有HTML元素都有自己的预定义页边距和填充以及其他基于呈现它们的浏览器的属性，例如，将{px {1}}上的8px页边距默认情况下，大多数浏览器中的元素，可以通过显式定义代码来覆盖它。

作为一个旁注，有一些库可以帮助解决不同浏览器之间的不一致以及它们如何渲染元素的问题，我来看看normalize.css，这是一个很棒的CSS唯一库，其中包含很多文档。

Answer 3

您的图片似乎有问题，请尝试裁剪图片。

* { 
    margin:0; 
    padding:0; 
}
/* container holding both the header photo and text */
.container {
     position: relative;
     text-align: center;
     color: white;
} 
/* main header image */
.image {
    filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
    width: 100%;
    height: auto;
}
/* name text */
.name {
    position: absolute;
    top: 17.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 600%;
    font-weight: bold;
    overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
    position: absolute;
    top: 23.5%;
    left: 40%;
    transform: translate(-30%, 50%);
    font-size: 200%;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style=" background-color: #000000">
<div class="container">
    <img class="image" 
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Header Picture">
    <div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
    </div>
</body>
<html>

如何删除div元素和图像周围的空白边缘？

3 个答案: