Question

我试图定位背景图像，使其保持与屏幕大小成比例/自适应，而不是浮动到导航栏。我使用的CSS是：

#apology{
background-image:url('http://i.imgur.com/jkXf9IE.png');
width:50%;
margin:0 auto;


background-position:50% 50%;
background-size:cover;


position:fixed;
left:10%;
top:10%;
right:10%;
bottom:10%; 

}

这是一个小提琴background-image

Answer 1

更新top css，用像素而不是百分比

修复它

#apology {
    background-image: url(http://i.imgur.com/jkXf9IE.png);
    width: 50%;
    margin: 0 auto;
    background-position: 50% 50%;
    background-size: cover;
    position: fixed;
    left: 10%;
    top: 52px; //update this
    right: 10%;
    bottom: 10%;
}

工作 jsfiddle

Answer 2

类似于this？

#apology{
    background-image:url('http://i.imgur.com/jkXf9IE.png');
    margin:0 auto;
    background-position:50% 50%;
    background-size:cover;
    position:fixed;
    top:50px;
    bottom: 0;
    left: 15px;
    right: 15px;
}

如果您希望徽章在所有情况下都完全可见。即使浏览器窗口非常狭窄，您也必须更改图像。仅在透明背景上使用徽章创建png图像，并在css中添加蓝色作为背景颜色。

Answer 3

1。）宽度和边距与固定位置及其上/左/右/下参数相矛盾。对于元素本身而言。

2.。）背景位置与cover大小相矛盾。 background-position:50% 50%;将背景图像的左上角放在容器的中心，这可能不是您想要的。只需删除它，只使用background-size: cover;和background-attachment: fixed

无法正确定位背景图像

3 个答案: