语义背景图片

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

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