Question

我正在学习html css，我遇到了一些困难。所以我有一个div和一篇文章，我确实想给他们一个背景，所以如果你给页面充电，你将有一个带有标题等的背景，如果你滚动一点，你有文章有他自己的背景然后一个页脚。

<body>
    <div class="background">        
        <div id="bloc">
            <p class="menu"><a href="#">Mes voyages</a></p>
            <p class="menu"><a href="#">Mes photos</a></p>
            <p class="menu"><a href="#">Mes conseils</a></p>
        </div>      

    </div>      

    <article class="article">
            <h1>Présentation</h1>
    </article>

    <footer class="foot">
        <p>Me contacter:<br/>
        <a href="lol@hotmail.fr">E-mail</a>
        </p>
        </footer>

</body>

我也会给你一个我的css样本：

.background {
    background-image: url('images/back.png');
    background-size: cover;
    display: block;
    height: 700px;
    left: 0;
    position: absolute;
    right: 0;
    top:0;
    overflow:hidden;
}
#bloc {
    background: rgba(255, 255, 255, 0.35);
    position:absolute;
    top:15%;
    left:10%;
    right:10%;
    transform:translateY(-50%);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    display:flex;
    justify-content: space-around;
    align-items:center;
    border-radius:15px;
    font-family: Helvetica, Arial, sans-serif;
}

body {
    height:100%;
}

article {
    background-image:url('images/article.jpg');
    height:1080px;
}

我真的不明白为什么它不起作用？哦！当我将页面调整到一定大小以下时，文本会滚动出“菜单”类的边框。

感谢您的帮助。我试图说清楚^^

Answer 1

这是你想要做的吗？

<article class="article">
        <h1 id="header">Présentation</h1>
</article>

.background{
background-image: url('images/back.png');
background-size: cover;
display: block;
height: 700px;
left: 0;
position: fixed;
right: 0;
top:0;
overflow:hidden;
}
#header{
position:fixed;}

为每个<div>和/或部分提供背景信息

1 个答案: