Question

我想建立一个网站，我开发我的网站设计，但我有一个问题。我的页面中有Image和两个按钮以及4 li元素，但它们不是真的！我上传了我的CSS和HTML以及带图像的其他文件，请帮帮我。我的要求：我想要图片中心的按钮，图片将所有页面大小和li元素固定在背景图片之下，但它不是真的！

problem

problem_2

我希望全部显示在中心和背景图像是固定的

这是我的css代码：

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
}

@font-face {
 font-family: 'BYekan';
 src: url('/fonts/BYekan.eot');
 src: local('b BYekan'), url('fonts/BYekan.woff') format('woff'), url('fonts/BYekan.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

html {
    background-color: #fff;
    color: #141414;
    font-weight: normal;
    font-family: 'BYekan','tahoma';
    font-size: 16px;
    text-rendering: optimizeLegibility;
}

.row{
    max-width: 1140px;
    margin: 0 auto;
}

header {
    background-image: linear-gradient( rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7) ), url(img/Header.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    right: 50%;
    transform: translate( +25% , -50% );
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:link,
.btn:visited{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}


.btn-full:link,
.btn-full:visited{
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;
    margin-left: 15px;
}


.btn-ghost:link,
.btn-ghost:visited{
    border: 1px solid #e67e22;
    color: #e67e22;
}


.btn:hover,
.btn:active {
    /*background-color: #3498db;*/
}

.btn-full:hover,
.btn-full:active{
    background-color: #3498db;
    border: 1px solid #3498db;
    color: #fff;
}


.btn-ghost:hover,
.btn-ghost:active{
    background-color: #2ecc71;
    border: 1px solid #2ecc71;
    color: #fff;
}

这是我的HTML代码：

<head>
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/col.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/4cols.css">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
    <title>Techtime</title>
</head>
<body>
    <nav>

        <div class="row">

            <img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
            <ul class="main-nav">

                <li><a href="#">صفحه اصـلی</a></li>
                <li><a href="#">دسته بنـدی</a></li>
                <li><a href="#">دربـاره ما</a></li>
                <li><a href="#">تماس با ما</a></li>

            </ul>

        </div>

    </nav>
    <header>

        <div class="hero-text-box">

            <h1>به دنیای برنامه نویسی سلام کنید</h1>
            <a class="btn btn-full" href="#">سلام</a>
            <a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>

        </div>

    </header>

</body>

请帮帮我

Answer 1

如果我理解正确，你想让背景涵盖所有内容，包括<nav>？

在这种情况下，您只需在<nav>内移动<header>。

<header>
    <nav>
        <div class="row">
            <img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
            <ul class="main-nav">
                <li><a href="#">صفحه اصـلی</a></li>
                <li><a href="#">دسته بنـدی</a></li>
                <li><a href="#">دربـاره ما</a></li>
                <li><a href="#">تماس با ما</a></li>
            </ul>
        </div>
    </nav>
    <div class="hero-text-box">
        <h1>به دنیای برنامه نویسی سلام کنید</h1>
        <a class="btn btn-full" href="#">سلام</a>
        <a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
    </div>
</header>

Answer 2

farzam我建议你使用bootstrap然后你会得到很多内置的类来设计你的网站样式，这使你的样式更容易。所以使用bootstrap，这个HTML将按你的意愿工作。

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
        <div class="container-fluid" style="margin-top:30%;">
            <div style="width:500px;margin:auto;">
                <h1 style="text-align:center;">به دنیای برنامه نویسی سلام کنید</h1>

            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <a class="btn btn-full" href="#" style="margin:auto;float:right;">سلام</a>
             </div>

            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <a class="btn btn-ghost" href="#" style="margin:auto;">اطلاعات بیشتر</a>
           </div>
        </div>

         <div style="bottom:0;clear:both;position:fixed;">

            <ul class="main-nav">

                <li><a href="#">صفحه اصـلی</a></li>
                <li><a href="#">دسته بنـدی</a></li>
                <li><a href="#">دربـاره ما</a></li>
                <li><a href="#">تماس با ما</a></li>

            </ul>

    </div>

</body>
</html>

和我使用的自定义CSS

html{
  width:100%; 
  height: 100%;
}

body{
height;100%;
width:100%;
margin:0;
background: url("../img/slide1.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

我有css结图像和ul元素

2 个答案: