更新:我已经囊括了所有的我的代码。我有我的设置为100%的身体和背景图片的宽度和我身边有我的页面周边的空白。我试着用百分比,边距和填充,没有什么打到目前为止的工作。我有一个背景图像是黑色,所以它是非常明显的。
下面是我的一些CSS的:
body {
background: url("background.png") no-repeat fixed center;
background-size: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#msg {
color: #000000;
font-size: 40px;
margin: 0 auto;
padding-top: 400px;
padding-right: 50px;
float: right;
font-family: "Roboto Mono", monospace;
}
header {
width: 100%;
background: url("background 2.png") no-repeat fixed center;
background-size: 100%;
animation: example 1s;
animation-iteration-count: 1;
margin: -10px;
margin: 0;
padding: 0;
}
@keyframes example {
0% {
background: url("background.png") no-repeat fixed center;
}
25% {
background: grey;
}
50% {
background: url("background.png") no-repeat fixed center;
}
100% {
background: url("background.png") no-repeat fixed center;
}
}
.glitch {
position: relative;
font-family: "Raleway", sans-serif;
font-weight: 500;
color: white;
font-size: 250px;
padding-top: 300px;
text-align: center;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 300.5px;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 5px;
text-shadow: -1.5px 0 red !important;
background: black;
animation: glitch-anim-1 1.89s infinite linear alternate-reverse;
}
.glitch::after {
left: -10px;
text-shadow: -1.5px 0 rgb(89, 0, 255);
background: black;
animation: glitch-anim-2 1.8s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
0% {
clip: rect(100px, 1500px, 150px, 0);
}
10% {
clip: rect(50px, 1500px, 25px, 0);
}
20% {
clip: rect(50px, 1500px, 25px, 0);
}
30% {
clip: rect(50px, 1500px, 400px, 0);
}
40% {
clip: rect(600px, 1500px, 50px, 0);
}
50% {
clip: rect(300px, 1500px, 65px, 0);
}
60% {
clip: rect(100px, 1500px, 150px, 0);
}
70% {
clip: rect(50px, 1500px, 25px, 0);
}
80% {
clip: rect(200px, 1500px, 30px, 0);
}
90% {
clip: rect(600px, 1500px, 50px, 0);
}
100% {
clip: rect(600px, 1500px, 50px, 0);
}
}
@keyframes glitch-anim-2 {
0% {
clip: rect(100px, 1500px, 150px, 0);
}
10% {
clip: rect(50px, 1500px, 25px, 0);
}
20% {
clip: rect(50px, 1500px, 25px, 0);
}
30% {
clip: rect(50px, 1500px, 400px, 0);
}
40% {
clip: rect(600px, 1500px, 50px, 0);
}
50% {
clip: rect(300px, 1500px, 65px, 0);
}
60% {
clip: rect(100px, 1500px, 150px, 0);
}
70% {
clip: rect(50px, 1500px, 25px, 0);
}
80% {
clip: rect(200px, 1500px, 30px, 0);
}
90% {
clip: rect(600px, 1500px, 50px, 0);
}
100% {
clip: rect(600px, 1500px, 50px, 0);
}
}
.arrow {
color: #ffffff;
font-size: 80px;
margin-top: 6%;
margin-left: 50%;
margin-bottom: 10%;
}
/* -----------
NAVIGATION
------------ */
nav {
position: fixed;
top: 0;
width: 100%;
text-align: center !important;
background: #fffefe;
margin: -8px;
z-index: 2 !important;
}
nav > ul > li {
padding: 8px 20px;
display: inline-block;
}
nav > ul > li > a {
text-decoration: none;
list-style-type: none;
color: #000000;
font-family: "Major Mono Display", monospace;
font-size: 20px;
}
nav > ul > li:hover {
/* ADD WEBKIT */
transform: rotate(-180deg);
}
.container {
background: url("background.png") no-repeat fixed center;
background-size: 100%;
width: 100%;
height: 500px;
}
.sectionHead {
font-family: "Major Mono Display", monospace;
float: right;
/* ADD WEBKIT */
transform: rotate(90deg);
font-size: 30px;
padding: 50px 10px;
}
/* ABOUT */
.b1 {
background: #fffefe;
width: 90%;
height: 600px;
margin-top: 150px;
margin-bottom: 200px;
float: left;
}
.aboutPic {
width: 355px;
height: 325px;
margin-top: 140px;
margin-left: 50px;
border-radius: 50%;
}
#description {
margin-left: 400px;
margin-right: 200px;
margin-top: -300px;
padding: 20px;
text-align: center;
}
.name {
text-transform: uppercase;
font-family: "Raleway", sans-serif;
font-size: 45px;
font-weight: 100;
letter-spacing: 1px;
line-height: 1px;
}
.des1 {
font-family: "Raleway", sans-serif;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
line-height: 20px;
}
.des2 {
font-family: "Raleway", sans-serif;
font-size: 16px;
font-weight: 500;
}
/* SKILLS */
.b2 {
background: #fffefe;
width: 90%;
height: 600px;
margin-bottom: 200px;
float: right !important;
}
#skills-text {
position: absolute;
width: 30%;
margin-top: 200px;
margin-left: 700px;
font-family: "Raleway", sans-serif;
}
#skills-text .title {
text-transform: uppercase;
font-family: "Raleway", sans-serif;
font-size: 35px;
font-weight: 200;
line-height: 2px;
}
#skills-text > ul > li {
font-size: 16px;
font-weight: 200;
}
#skills {
position: relative;
margin-top: 40px;
width: 50%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
}
#skills p {
font-family: "Raleway", sans-serif;
text-align: center;
font-size: 11px;
margin-top: 5px;
margin-bottom: -5px;
}
i {
font-size: 48px;
}
.jquery {
width: 50px;
height: 50px;
}
.redux {
margin-top: -2px;
margin-bottom: 2px;
width: 80px;
height: 60px;
}
.boot {
margin-top: 0px;
margin-bottom: 0px;
width: 45px;
height: 45px;
}
/* PROJECTS */
.b3 {
background: #fffefe;
width: 90%;
height: 600px;
margin-bottom: 200px;
float: left;
}
.projects {
padding-top: 86px;
padding-left: 20px;
}
figure.display {
display: inline-block;
position: relative;
overflow: hidden;
width: 21.5%;
height: 21.5%;
color: #646464;
text-align: center;
border-radius: 50%;
}
h2 {
font-family: "Roboto Mono", monospace;
font-size: 20px;
}
.projectLi {
font-family: "Raleway", sans-serif;
font-size: 12px;
text-align: start;
}
figure.display * {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
figure.display img {
width: 140%;
opacity: 0.3;
}
a {
text-decoration: none;
}
#link {
text-decoration: none;
list-style-type: none;
background: none;
border: 1px solid #646464;
border-radius: 5%;
color: #646464;
width: 42%;
height: 15%;
margin: 3px;
padding-left: 0;
font-family: "Raleway", sans-serif;
font-size: 12px;
font-weight: 700;
text-align: center;
}
#link:hover {
background: #646464;
color: #ffffff;
transition: 500ms;
padding-left: -10px;
}
#link > i {
font-size: 13px;
color: #646464;
background: none;
padding-left: 0;
}
figure.display figcaption {
position: absolute;
margin: 40px;
display: inline-block;
padding: 5px 5px;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
figure.display:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: "";
background: #c2c1c1;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(110deg) translateY(-50%);
transform: rotate(110deg) translateY(-50%);
}
figure.display.overlay {
background: #f1f1f1;
}
.note {
list-style-type: none;
font-size: 13px;
padding-top: 5px;
}
/* CONTACT */
.b4 {
background: #fffefe;
width: 90%;
height: 600px;
margin-bottom: 100px;
float: right !important;
}
form {
position: absolute;
margin-top: 100px;
margin-left: 400px;
}
input {
width: 400px;
height: 30px;
margin: 15px 0px;
border-bottom: 1px solid #000000;
border-top: none;
border-left: none;
border-right: none;
background: #fffefe;
}
input::placeholder {
font-family: "Raleway", sans-serif;
font-size: 14px;
}
textarea {
background: #fffefe;
height: 100px;
min-width: 396px;
max-width: 396px;
border: 1px solid #000000;
}
textarea::placeholder {
font-family: "Raleway", sans-serif;
font-size: 14px;
padding: 2px;
}
.submit {
font-family: "Raleway", sans-serif;
font-size: 14px;
margin-top: 10px;
width: 400px;
height: 30px;
box-shadow: none;
background: #000000;
color: #fffefe;
border: 1px solid black;
}
.fa-angle-double-right {
font-size: 12px;
}
button:hover {
background: #fffefe;
color: #000000;
}
.formText {
text-align: center;
}
/* FOOTER */
footer {
clear: both;
background: #fffefe;
color: #8f8f8f;
height: 100px;
width: 100%;
margin-bottom: -200px;
}
h3 {
font-family: "Raleway", sans-serif;
font-size: 14px;
font-weight: 300;
text-align: center;
padding-top: 30px;
}
.social {
margin-top: -50px;
margin-right: 90px;
float: right;
}
.fli {
font-size: 20px;
color: #8f8f8f;
padding: 10px;
}
.fli:hover {
color: #000000;
transition: 800ms;
}
.fg {
font-size: 20px;
color: #8f8f8f;
padding: 10px;
}
.fg:hover {
color: #000000;
transition: 800ms;
}
事情是浏览器有一些默认的CSS设置。定义你自己的样子:)当心,你重新定义之前,一切都将是那么无样式的前谷歌搜索词组“重置CSS”,并将其纳入
尝试设置背景图片的属性...
background-size : cover;
我这样认为,从这个属性您的问题将得到解决。
它是在你的页面添加默认余量基本的东西。对于防爆:Click to see the Default margin
所以,你需要删除。所以,你必须添加的样式在你的风格标签<style>body {margin:0px;}>
你可以根据你的需要添加额外的样式。
<html>
<head>
<style>
.img
{
width:100%;
height:100%;
}
body
{
margin:0px;
}
</style>
</head>
<body>
<image src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" class="img">
</body>
</html>
希望它会帮助你。谢谢。
好吧,我不知道你的HTML结构,所以我的建议,我主要使用的东西,
<head>
#..
</head>
<body style="margin: 0;">
<img class="background">
</body>
<style>
.background{
width: 100%;
height: ..
..
}
</style>
我要做的就是让身体,整个屏幕。边距设置为0,使其100%的屏幕尺寸没有留下更多的空间。
然后,我添加的,而不是直接添加背景图片body标签里面我的头格或背景图片或页脚。你可以让所有的这些100%或任何你的要求。不会有关于保证金的任何问题。
这是我使用,在大多数情况下,我工作得很好。希望这可以帮助你。