語義背景圖片

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（或任何其他光柵圖像），並且不像您的容器那樣寬或高，則它將伸展，從而導致像素化。