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

相对于屏幕尺寸将图像保持在适当的位置CSS div ID

1 个答案: