语义背景图像

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;
}

但我得到了这个结果。

它看起来很像pixeled。

Answer 1

将背景设置为覆盖将拉伸图像。如果图像是jpeg（或任何其他光栅图像）并且不像容器那样宽或高，它将会拉伸，从而导致像素化。