html - 图片上方或下方

标签 html css image background-image

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

它必须是带有 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>

感谢您的帮助!

最佳答案

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

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;
}

关于html - 图片上方或下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48841030/

相关文章:

html - 如何在css中合并两个类

html - 用css定位三个div

javascript - HTML - 搜索不起作用

css - 我可以在 SASS mixin 中声明一个新变量吗?

java - 如何在 Java 中使用 JPEG 创建缩略图?

html - 如果父级有带有 CSS 的子级,则将样式应用于父级

javascript - 用背景颜色智能地填充 Bootstrap 列

javascript - 单击复选框并返回时如何更改父类?

c++ - 将 floodfill 输出(连接的像素)复制到新的垫子中

android - Instagram 如何在故事模式中增加背景中的图像颜色