Question

我试图将图像置于其父级div中并将其固定。我想给它折叠标题外观（即使它不是真正的标题）所以我使用background-attachment: fixed;来保持它。

这种方法的问题在于，当我使用background-position: center center;将图像居中时，图像不会居中。

显然，如果我删除CSS的background-attachment: fixed;行，则图像会居中。

有没有办法background-attachment: fixed;一张图片并将其居中？

.aparent {
    min-height:200px;
}
#achild {
    background-image: url(https://images.unsplash.com/photo-1442589031151-61d5645469d7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=86aed4d82f9ab1324e46ae97b4cd98e1);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
}

显示代码的笔 - http://codepen.io/anon/pen/GoBJpR （删除background-attachment:fixed;以显示其外观）

感谢。

编辑：笔打破了

Answer 1

试试这个：http://codepen.io/anon/pen/RrBPob我实现了你需要的外观：

background-position: 50% 70%;
background-attachment: fixed;

调整百分比以适合您。第一个值是水平（X），第二个值是垂直（Y）。

具有固定和居中背景附件的响应式CSS图像

1 个答案: