我试图定位背景图像,使其保持与屏幕大小成比例/自适应,而不是浮动到导航栏。我使用的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
答案 0 :(得分:2)
更新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
答案 1 :(得分:1)
类似于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中添加蓝色作为背景颜色。
答案 2 :(得分:1)
1。)宽度和边距与固定位置及其上/左/右/下参数相矛盾。对于元素本身而言。
2.。)背景位置与cover
大小相矛盾。 background-position:50% 50%;
将背景图像的左上角放在容器的中心,这可能不是您想要的。只需删除它,只使用background-size: cover;
和background-attachment: fixed