Question

所以我是css的新手，并且一直在努力开发一个基本网站作为大学项目，但是我在使用类名mainhead来对齐div的背景图像时遇到了问题，它在屏幕的左边留下了一个空白。无论我设置的是什么宽度，左边都有一个空白的空白区域。

我不知道该怎么做，我没有设置任何填充或边距，也没有指定左：0px，但没有快乐。我遇到的问题是mainhead类这是代码，请帮忙！

.loginbox
{
    position: fixed;
    top: 0px;
    margin: 0px;
    left: 0px;
    font-weight: bold;
    background-color: #2C2C2C;
    text-align: right;
    width: 1370px;
    height: 40px;
}
.loginbut
{
    background-color: #2C2C2C;
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 100%;
    color: #c9c9c9;
    text-align: right;
    margin-right: 50px;
    margin-top: 5px;
    border-color: #2C2C2C;
    border-radius: 8px;
    top: 10px;
    text-decoration: none;
    outline: none !important;
}
.loginbut:hover
{
    background-color: #000000;
}
.mainhead
{
    background-image: url("grey.jpg");
    background-repeat: none;
    border: 1px solid black;
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    top: 40px;
    width: 1360px;
    height: 170px;
    color: #c9c9c9;
    text-align: center;
}
.mainhead h1
{
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 300%;
}

Answer 1

使用背景位置：中心;和背景大小：封面;并从主头移除宽度。希望它能够发挥作用

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Answer 2

尝试使用Eric Meyer enter link description here的重置代码，并将.mainhead div设置为100％。

在css中对齐div元素的背景图像

2 个答案: