相对于容器具有固定位置和大小容器的背景
相对于容器具有固定位置和大小容器的背景
提问于 2017-05-05 20:19:40
所以我今天遇到了这个。
我有一个比视口更长的部分，其中有一个带有background-attachment: fixed;的背景图像。此背景也使用background-size: cover;属性。(需要用于响应目的)
将固定位置应用于背景后，它会裁剪图像以使其适合当前视口高度，并溢出标记的顶部。
有没有办法让图像坐在正确的位置(即与未固定的位置相同)，并保持封面属性。
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
background-size: cover;
background-position: 50% 50%;
/* set the height of the hero. */
height: 125vh;
}
.fixed {
background-attachment: fixed;
}<h4>With the fixed position</h4>
<section class="hero fixed"></section>
<h4>Without the fixed position</h4>
<section class="hero"></section>
我猜由于固定元素固定在视口上，答案是否定的，但不确定，因为它是背景图像。我想知道是否有人找到了解决办法？
回答 1
Stack Overflow用户
发布于 2017-05-05 21:14:40
问题是，如果你使用fixed，背景区域是固定的100%视口-你可以通过添加background -size来放大背景区域：
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
/*background-size: cover;*/
background-position: 50% 50%;
/* set the height of the hero. */
background-size: 125vh;
height: 125vh;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43804788
复制相关文章
相似问题
腾讯云开发者
