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