Question

我正在尝试在横幅上添加照片，并让它位于我网页上的徽标正上方。无论屏幕尺寸如何，我都希望照片保持在同一位置（在徽标上方），现在它仍然保持在横幅内的相同位置。我该如何解决这个问题？

我目前的代码如下所示

＆＃13;

div#banner {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00AD83;
  width: 100%;
  height: 100px;
}
div#banner-content {
  position: static;
  margin-left: 25%;
  padding: 0px;
  z-index: 1;
}
div#main-content {
  padding-top: 70px;
}

＆＃13;

<div id="banner">
  <div id="banner-content">
    <img src="/img/Banner-Words.jpg" alt="URGENT APPEAL" style="width:349px;height:100px;">
  </div>

＆＃13;

Answer 1

为您的徽标提供固定的保证金而不是百分比。

div#banner-content { 
position: static;
margin-left: 30px; 
padding: 0px; 
z-index: 1;
}

Answer 2

background-image =“/ img / Banner-Words.jpg”？

如何将图像添加到横幅并将其位置调整为更改屏幕宽度

2 个答案: