在背景上定位图像（背景大小变化）答案

【问题标题】：Position image on background(background size changes)在背景上定位图像（背景大小变化）
【发布时间】：2015-09-05 16:55:31
【问题描述】：

我尝试使用 css 在我的网站背景上放置图像。我希望这些图像在我的背景上始终保持相同的位置。但是我的背景图片改变了大小并且图片移动了......

背景：

html{
background: url("../images/example.gif") no-repeat bottom right fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

图片：

.image{
position: fixed;
right: 219.5px;
top: 368px;
}

有什么想法可以让图像始终保持相同的位置吗？

【问题讨论】：

请分享任何有效的演示/jsfiddle 或实时链接，我们可以在其中检查此问题，以便我们以更好的方式提供帮助...thanx

标签： html css image css-position

【解决方案1】：

请试试这个：

html{
background: url("../images/bg.jpg") no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
        background-size: cover;
        color:#fff;
        background-color:#FFF;
        position: relative;
}

css:

.image{
position: fixed;
right: 219.5px;
top: 368px;
}

DEMO PAGE

【讨论】：

请看演示页面@AsdMan

【解决方案2】：

请试试这个。 css 可以解决你的问题:)

    body {
           background: url('../images/bg.jpg') no-repeat center center fixed;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           -o-background-size: cover;
            background-size: cover;
            color:#fff;
            background-color:#FFF;
            position: relative;
}

如果上述一次不起作用，请尝试以下代码

    body
       {
        background-image: url("../images/background.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
       }

【讨论】：

在发布之前测试您的答案