Question

我似乎无法将我的背景图片显示在我的投资组合网站的CSS文件中。我很确定，我的CSS文件完全忽略了我的div。视差区域由于某种原因，我敢肯定我会忽略一个小错误。对不起，对于新手问题，但我是HTM的新手，我仅将其用于我的投资组合网站。

我对视差进行了CSS调整，并确保HTML中的视差内容正常工作，但似乎看不到任何变化。我添加了一些周围的代码，以确保没有将任何东西放错地方。

这是HTML

<body>
    <div class="wrapper">
        <nav class="clearfix">
        <a href="#"><s>Zarif Rahman</s></a>
        <a href="#"><img src="images/z&r_logo.png" alt="dribble icon"></a>
        </nav>
        <div class ="parallax">
        <header>
        <h1>My Portfolio</h1>
        <p>


   Large text here <a href="mailto:zarifurzarif@gmail.com"> email</a>.
        </p>
        </header>

这是CSS

* {
    margin:0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-weight: bold;
}
html {
    font-family: 'Julius Sans One';
}
body {
    width: 100%;
    background-color: #FEA49F;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.wrapper{
    width: 90%;
    margin: 0 auto;    
}
.parallax{
    height: 100vh;
    width: 100%;
    background-image: image("images/IMG_5223.jpg");
    background-size: cover;
    background-position: center;
    display: table;
    background-attachment: fixed;
}
.clearfix::after {
    content:"";
    display: table;

尽管我努力，但似乎什么也没显示。

Answer 1

此背景图片图片有误，正确的是背景图片网址

* {
    margin:0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-weight: bold;
}
html {
    font-family: 'Julius Sans One';
}
body {
    width: 100%;
    background-color: #FEA49F;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.wrapper{
    width: 90%;
    margin: 0 auto;    
}
.parallax{
    height: 100vh;
    width: 100%;
    background-image: url("http://lorempixel.com/1000/1000/");
    background-size: cover;
    background-position: center;
    display: table;
    background-attachment: fixed;
}
.clearfix::after {
    content:"";
    display: table;

<body>
    <div class="wrapper">
        <nav class="clearfix">
        <a href="#"><s>Zarif Rahman</s></a>
        <a href="#"><img src="images/z&r_logo.png" alt="dribble icon"></a>
        </nav>
        <div class ="parallax">
        <header>
        <h1>My Portfolio</h1>
        <p>


   Large text here <a href="mailto:zarifurzarif@gmail.com"> email</a>.
        </p>
        </header>

Answer 2

background-image: image("images/IMG_5223.jpg");的用法错误。它应该是background-image: url("images/IMG_5223.jpg")或background: url("images/IMG_5223.jpg")。
请看看background-image property

视差滚动效果不显示

2 个答案: