Html 如何制作背景附件：固定；不拉伸图像？_Html_Css_Background Image_Stretch

Html 如何制作背景附件：固定；不拉伸图像？

html css

Html 如何制作背景附件：固定；不拉伸图像？,html,css,background-image,stretch,Html,Css,Background Image,Stretch,我想使背景图像移动的使用滚动，这是正常的使用背景附件：固定；但问题是它正在拉伸图像，我无法再定位它了你可以在全屏上更好地看到这个问题第一个图像是位置中心顶部由于附件原因，无法定位第二个有什么方法可以做到这一点吗？不幸的是，您不能同时使用背景附件：固定的和背景尺寸：封面。当background attachment:fixed确定背景图像的行为类似于position:fixed元素时，背景大小：cover强制它计算相对于元素本身的背景大小您仍然可以使用JavaScript计算w

我想使背景图像移动的使用滚动，这是正常的使用背景附件：固定；但问题是它正在拉伸图像，我无法再定位它了

你可以在全屏上更好地看到这个问题

第一个图像是位置中心顶部

由于附件原因，无法定位第二个

有什么方法可以做到这一点吗？

不幸的是，您不能同时使用

背景附件：固定的和背景尺寸：封面。
当background attachment:fixed
确定背景图像的行为类似于position:fixed
元素时，背景大小：cover
强制它计算相对于元素本身的背景大小
您仍然可以使用JavaScript计算window.onscroll（）
事件中的背景位置。
不幸的是，您不能同时使用背景附件：固定的
和背景大小：封面。
当background attachment:fixed
确定背景图像的行为类似于position:fixed
元素时，背景大小：cover
强制它计算相对于元素本身的背景大小
您仍然可以使用JavaScript计算window.onscroll（）事件中的背景位置。
可能我误解了这个问题。这是我的变体，因为我意识到我想要得到一个结果

HTML
也许我误解了这个问题。这是我的变体，因为我意识到我想要得到一个结果

HTML
使用背景大小：设置图像大小
 使用背景大小：设置图像大小 使用背景位置：固定您正在将图像固定在一个位置，并且图像不移动。例如，它用于视差滚动，以产生视差错觉。所以我不太明白你想要什么：）你说得对，但我的元素距离顶部约500px，因此图像开始显示底部，而不是顶部或中心周围的某个位置。图像固定在整个视口/窗口上，基本上是因为你将背景大小设置为覆盖，它填充了整个宽度和高度。因此，如果您希望图像滚动，则需要删除背景附件：固定：）和背景位置：固定您正在将图像固定在一个位置，并且图像不移动。例如，它用于视差滚动，以产生视差错觉。所以我不太明白你想要什么：）你说得对，但我的元素距离顶部约500px，因此图像开始显示底部，而不是顶部或中心周围的某个位置。图像固定在整个视口/窗口上，基本上是因为你将背景大小设置为覆盖，它填充了整个宽度和高度。因此，如果你想滚动图像，你需要删除背景附件：固定：）没有bud，我正在尝试通过选择垂直居中图像来获得视差效果，我的容器距离页面顶部500像素，因此当你进入网站时，你会看到图像的底部，我想显示顶部。没有bud，我正在尝试使用垂直居中图像的选项来获得视差效果，我的容器距离页面顶部为500px，因此当您进入站点时，您会看到图像的底部，我想显示顶部。
.container{

    display: block;
    position: relative;
    width: 100%;
    margin:0 0 10px 0;
    padding:0;
    overflow:hidden;
    background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    min-height:350px;

}

.container2{
    background-attachment:fixed;
}

<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>

    .container{
    display: block;
    position: relative;
    width: 100%;
    margin:0 0 10px 0;
    padding:0;
    overflow:hidden;    
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    min-height:350px;
    background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}

.container2{
    background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
    background-size:cover;
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
.push{
    margin-bottom:800px;
    display: block;
    width: 100%;
    height:1px;
}