图片上方或下方答案

【问题标题】：Image above or under the图片上方或下方
【发布时间】：2018-07-28 04:54:21
【问题描述】：

这是我坚持的非常基本的问题。我正在用我的艺术作品集设计我的第一页，但遇到了问题。我在任何设备上都将背景设置为全屏，并想添加一个将出现在左角的图像。但我不知道如何正确编码，它要么是背景上方带有白框的图像，要么是背景下方的图像。

它必须与 divclass 行有关，因为它是在背景之上还是在背景之下取决于将图像放在其之前还是之后

    <!DOCTYPE html>
    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


body, html {
    height: 100%;
    margin: 0;
}

.bg {

    background-image: url("https://78.media.tumblr.com/9eda2a03998298df51259dc81b0dc0ad/tumblr_p49iilKTmk1x5vw3ao1_1280.jpg");


    height: 100%; 


    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>





    <div class="bg"></div> 
    <img src="<img src="example" alt="example" width="42" height="42">" alt="example" width="42" height="42">





    </body>
    </html>

感谢您的帮助！

【问题讨论】：

@RohanPillai 您编辑了问题以包含 sn-p 所以至少更正错误的代码，不要那样离开，或者干脆不要将其更改为 sn-p

标签： html css image background-image

【解决方案1】：

您可以简单地考虑多个背景并注意顺序。 第一张图像是顶层。

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background-image:url("https://lorempixel.com/100/100/"), url("https://78.media.tumblr.com/9eda2a03998298df51259dc81b0dc0ad/tumblr_p49iilKTmk1x5vw3ao1_1280.jpg");
  height: 100%;
  background-position: top left,center;
  background-repeat: no-repeat;
  background-size: auto,cover;
}

【讨论】：