gpt4 book ai didi

html - 如何去除 div 元素和图像周围的白边?

转载 作者:太空宇宙 更新时间:2023-11-03 22:20:06 33 4
gpt4 key购买 nike

我正在尝试删除标题照片周围的空白区域,它应该会覆盖整个页面。我在我的计算机 (localhost) 上运行一个本地服务器来测试这个 PHP 文件。

我已经尝试了所有可以在 Stack Overflow 上找到的相关答案。我查找了多个线程并完成了以下操作:1) 通过将边距和填充更改为 0 来重置 CSS 样式2) 用 body 标签包围图像标签,现在应该重置3) 将宽度设置更改为 100%,将高度设置为自动

索引.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>

样式.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 我现在正在实现一些更改,看看为什么这个简化版本突然起作用了。它一定是我其余代码中的东西(我没有包括在内)让我先用它的其余部分重新更新这段代码。

最佳答案

这在本地和 jsfiddle 上测试时工作正常。但是您的 HTML 缺少 <head>标签。 CSS <link>应该进去。

关于html - 如何去除 div 元素和图像周围的白边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54295901/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com