Question

我能够在某种程度上使这个工作，但不是我想要的100％。所以如果有人能帮助我做到这一点，我将不胜感激。

我有一个宽度为1060像素的Wordpress网站。我在</body>标记之前创建了一个包含图像的DIV。我希望此图像位于站点容器的左侧外侧。我使用position：relative创建了这个; CSS。但是，我想要做的是让这些元素具有以下位置：fixed;属性，以便在滚动时保持其在屏幕上的位置。我可以再次在CSS中创建它。我可以在1920x1080的屏幕上看到我想要的一切，但是当我在2304x1440的屏幕上观看它时，图像将其移动到远离现场容器的位置，效果就会丢失。

以下是我用于在1920x1080屏幕上正常显示效果的HTML和CSS的示例;

HTML

<div class="left-container-wrapper">
<div class="left-container"><img src="image-url.jpg" width="100%"         /></div>
</div>

CSS

.left-container-wrapper {
width: 50%; /* Get it to be half the screen width */
.left-container{
float: right; /* To force it to the right edge of the parent container     which is exactly half the screen width */
position: fixed;
left: 530px; /* Half the width of the site container */
}

我所追求的是一种将图像固定在屏幕上的固定位置的方法，该图像在所有屏幕尺寸上都接触到我的网站容器的边缘。

任何人都可以建议一些会产生效果的CSS吗？

Answer 1

在屏幕尺寸达到1080px页面的整个宽度后，您可以使用@media更改正文，添加图像。 Check out this jsFiddle for an example.调整右下方窗格以查看效果。

CSS

@media screen and (min-width: 1080px) {
body {
    background-image: url("https://s.w-x.co/twcn_TWC_FacebookVideo_825x130_opt3.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
    }
}

#content {
  margin: 50px 100px;
}

固定位置图像，保持精确的宽度+高度和位置

1 个答案: