Question

当我将background-attachment: fixed设置为一组浮动元素的属性时，background-position无法正常工作。如果我将值正常设置为＆＃39; left top＆＃39;，它只能正确定位元素的左列。如果我将其设置为＆{39; center＆＃39;，则只有中心列中的图像可见，等等。只有将其设置为正常行为的方法是将图像的偏移量添加到{{ 1}}，或者增加background-position-x，但我不想要那样。有什么想法吗？

这是我的CSS：

background-size

Answer 1

一种可能的解决方法是将背景重复设置为repeat，并使背景图像与浮动元素及其边距完全一样大。

＆＃13;

.element {
    float: left;
    margin: 10px;
    width: 300px;
    height: 300px;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: initial;
    background-image: url(http://lorempixel.com/320/320/animals/5);
}

＆＃13;

<div class="element">div 1</div>
<div class="element">div 2</div>
<div class="element">div 3</div>
<div class="element">div 4</div>
<div class="element">div 5</div>
<div class="element">div 6</div>
<div class="element">div 7</div>

＆＃13;

这种方法的缺点是它有许多限制：

元素必须全部大小相同且边距相同
背景图片也必须是那个尺寸
所有元素都具有相同的背景

如果有效，那好吧！否则，我很高兴看到这个问题能得到更好的答案。

Answer 2

您可以尝试将元素包装在＆＃34; clearfix＆＃34;类：

<强> CSS：

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

更清晰的信息here。

＆＃34; clearfix是元素自动清除其子元素的一种方式，因此您不需要添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠。 clearfix是一种解决浮动元素的零高度容器问题的方法。＆＃34; Dec 18, 2011 - StackOverflow

<强> HTML：

<div class="clearfix">
    <div class="element"></div>
</div>

您也可以将元素包装在浮动内：

<强> CSS：

.element-wrap {
    float: left;
}
.element {
    margin: 10px;
    width: 300px;
    height: 300px;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: initial;
    background-image: url(...);
}

<强> HTML：

<div class="element-wrap">
    <div class="element"></div>
</div>

CSS background-attachment：fixed不能在浮动元素上正常工作

2 个答案: