css - 语义背景图像

Question

我正在尝试使用语义创建一个带有图像的标题。

这是我的html

<div class="ui inverted vertical segment landpage-image">
    <div class="ui page grid">
        <div class="column">
            <h1 class="ui title-header"></h1>
            <div class="centered grid slogan">
                <div class="column">
                    <p>Some content over here</p>
                </div>
            </div>
        </div>
    </div>
</div>

用下面的CSS

.landpage-image{
      height: 55%;
}

.landpage-image{
    background-image: url(/images/landpage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

但我得到的结果是:

看起来很像素化。

Answer 1

将背景设置为覆盖会拉伸(stretch)图像。如果图像是 jpeg(或任何其他光栅图像)并且没有您的容器那么宽或高，它会拉伸(stretch)从而导致像素化。