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

Question

我能够在一定程度上让它发挥作用，但不是我想要的 100%。因此，如果有人可以帮助我解决这个问题，我们将不胜感激。

我有一个宽度为 1060px 的 Wordpress 网站。我在 </body> 之前创建了一个包含图像的 DIV。标签。我希望这张图片位于站点容器的左侧之外。我使用 position: relative; 创建了这个CSS。但是，我想要做的是让这些元素具有位置:固定；属性，以便它在滚动时保持其在屏幕上的位置。同样，我可以在 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

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

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;
}