保持图像相对于屏幕大小CSS div id的位置

Question

我试图将我的位置静态地设置到屏幕的右侧，因为那是我试图保持的徽标所在的位置。在不同的显示器上，它会在屏幕上流动……有没有一种静态设置的方法，这就是我现在的幻灯片…(使用视差主题，这样我就不能在整个页面中强制显示位置，而只能强制显示幻灯片。)

<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2018/08/ITData_HomePage2018_01.jpg);">
  <div class="slide-body">
    <div class="container">
      <div class="slide-caption">
        <div class="slide-content">
          <h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
        </div>
        <h2 class="slide-title">Let us help you develop an IT Optimization Strategy and Define your technological priorities</h2>
        <a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=a588c51b-d8d4-4089-90c1-df8e14656af2&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-2" target="_self">Learn how we can help you succeed</a>
      </div>
      <div class="slide-image">
      </div>
    </div>
  </div>
</div>

这就是我到目前为止在CSS中尝试的固定位置(打破了页面)

#slide-6996 {
width: 100%;}

有没有办法将宽度保持在100%，并将图像锁定在幻灯片的右侧，同时仍然可以使用CSS滚动过去？

Answer 1

假设您引用的是作为背景图像添加的主图像中显示的徽标，那么您所需做的就是添加以下内容：

#slide-6996 {
    background-position: right;
}

这将保持背景向右对齐，这样徽标就会留在页面上，但它最终会在较小的布局中滑到文本下方。也许您应该使用媒体查询将对齐方式切换回左侧。

另一个不幸的副作用是，你的图像的那一侧有一个白条，除非你使用的是没有白条的图像，否则你会被它卡住。为了省去你的麻烦，我自己编辑了它，并在这里上传了图片：https://ibb.co/12dNQdn