Question

我正在尝试将大徽标图像设置为背景图像。我想将它放在右下角，无论窗口大小如何，都要保持在那里。我正在使用此代码：

<!DOCTYPE html>
<html>

<head>
   <title>My Site</title>
   <link href="style.css" rel="stylesheet">
</head>

<body>



    <p class="centeredImage"><img src="image1.png"></p>


</body>
</html>

的CSS：

body { 
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom; 

}

.centeredImage
    {
    text-align:center;
    display:block;
    }

这是将徽标放置在正确的位置，但在窗口底部稍微切掉（红色是实际的徽标大小）：

enter image description here

不确定我在这里做错了什么，我尝试在身体上添加底部填充物并没有用。有人可以给我一些关于我可能做错了什么的指示吗？

编辑：

所以我将徽标移动到这样的div中：

<!DOCTYPE html>
<html>

<head>
   <title>My Site</title>
   <link href="style.css" rel="stylesheet">
</head>

<body>

   <div class="innerdiv"><img src="logo.png"></div>
   <p class="centeredImage"><img src="image1.png" width="375px" height="667px"></p>

</body>
</html>

.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
}

.centeredImage
    {
    text-align:center;
    display:block;
    }

现在这个工作正常，徽标没有被切断，但是它略微重叠了手机的图像，是否有办法强制div中的图像显示在背面？

Answer 1

添加此CSS应该有效：

.innerdiv img {
    z-index: 0;
}
.centeredImg {
    z-index: 1;
}

添加这些代码可以解决您的问题。

Answer 2

"components": [{
  "name": "someName"
}],

首先，您必须提及图像的大小，例如尝试这个

<p class="centeredImage"><img src="image1.png"></p>

调整您选择的宽度和高度。

来到logo.png在CSS中尝试这个

<img src="image1.png" width="500px" height="100px">

在右下角设置背景图像，但图像的底部被剪切掉

2 个答案: