• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何在网页上的背景图像顶部放置图像

html 3次浏览

enter image description here我想创建一个网页,有一个背景图片,然后就在我的导航栏下方有一种封面图像,坐在它下面。如何在网页上的背景图像顶部放置图像

我已经设法得到一个背景图片,但接下来的图片只是坐在页面的底部。

我试过看过几篇文章和关于如何做到这一点的教程,但也一直在发生。

代码片段演示:


===========解决方案如下:

我想你应该摆脱花车。他们只是让页面的推理更加困难,至少对我来说。 我使用了CSS的flexbox功能来定位标题中的元素。你可以阅读更多关于此这里:https://css-tricks.com/snippets/css/a-guide-to-flexbox/enter link description here

我仍然不知道,如果你想要的头在顶部,然后消失,当你向下滚动或者说,如果你想让它浮在内容和留即使向下滚动,也会显示在顶部。因此,我在CSS中留下了一条评论 – 取消注释以查看其他选项。

HTML:

<body> 
    <div class="bg"> 
    <header> 
     <div class="logoContainer"> 
     <img src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"> 
     </div> 
     <ul class="main-nav"> 
     <li class="active"><a href="#">HOME</a></li> 
     <li><a href="#">PHOTOS</a></li> 
     <li><a href="#">PLAYERS</a></li> 
     <li><a href="#">NEWS</a></li> 
     <li><a href="#">SCHEDULE</a></li> 
     </ul> 
    </header> 
    <div class="socialLinksContainer"> 
     <div class="instagram"> 
     <a href="#"><img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"></a> 
     </div> 
     <div class="twitter"> 
     <a href="#"><img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"></a> 
     </div> 
    </div> 
    Main content goes here 
    </div> 
</body> 

CSS:

header { 
    height: 10vh; 
    background-color: rgba(255, 255, 255, 0.4); 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    width: 100%; 
    //uncomment this for the header to float over the content 
    //position: fixed; 
    //top: 10px; 
} 

.logoContainer { 
    height: 10vh; 
} 

.logoContainer > img { 
    max-width: 100%; 
    max-height: 100%; 
} 

.main-nav { 
    list-style: none; 
    margin-top: 100 px; 
    margin-left: 350 px; 
} 

.main-nav li { 
    display: inline-block; 
} 

.main-nav li a { 
    color: white; 
    text-decoration: none; 
    padding: 5 px 10 px; 
    font-family: "Roboto", sans - serif; 
    font-size: 15 px; 
} 

.main-nav li.active a { 
    border: 1 px solid white; 
} 

.main-nav li a: hover { 
    border: 1 px solid white; 
} 

# logo img { 
    width: 150 px; 
    height: 145 px; 
    padding-left: 10 %; 
} 

body { 
    font-family: sans-serif; 
    color: red; 
} 

hr { 
    width: 100 %; 
    height: 1 px; 
    background: #fff 
} 

.socialLinksContainer { 
    position: fixed; 
    right: 5px; 
    bottom: 5px; 
    display: flex; 
    flex-direction: row; 
} 

.title { 
    position: relative; 
    width: 1200 px; 
    margin-left: 0 px; 
    margin-top: 0 px; 
} 

.instagram > a > img { 
    max-width: 30px; 
    max-height: 30px; 
    margin-top: 10 px; 
    padding-left: 960 px; 
} 

.twitter img { 
    max-width: 30px; 
    max-height: 30px; 
    margin-top: 10 px; 
    padding-left: 30 px; 
} 

body, 
html { 
    height: 100 %; 
} 

body { 
    background-image: url('https://cdn.hockeycanada.ca/hockey-canada/Team-Canada/Men/World-Cup/2016/sep_29_wch_team.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.imageUnderTheNavbar { 
    max-height: 50px; 
} 

请看看这个小提琴:https://jsfiddle.net/5ufpomy4/4/

这东西,你脑子里想的?


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)