Question

我正在尝试将图像放在屏幕中央（手机），我还有一个大型徽标图像，我希望将其固定在页面的右下角。我是CSS和HTML的新手。到目前为止，我有这个：

<!DOCTYPE html>
<html>

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

<body>


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


    </div>      

</body>
</html>

，这在CSS中：

#content {
  width: 99%;
  height:100%;
  margin: auto;
  background-color: white;
   background-image: url('logo.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;
}

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

但是我实现了这个目标：

enter image description here

手机中心很好但是如果我调整窗口大小，徽标就不会粘在屏幕的右下方。我曾经玩过一点点使用页脚但是当我这样做时，徽标图像位于手机图像下方。我只是希望它在背景右下方，无论窗口有多大，手机图像居中。有人可以给我一些关于如何做到这一点的指示吗？谢谢！

编辑所以我将徽标图像包装在一个单独的div中：

 .logo {
    position: fixed;
    bottom: 0;
    right: 0;
  }

然而现在这略微重叠了居中的图像，即不在背景中

无法使用css

0 个答案: