調整字體大小使我的容器背景圖像的比例尺

我有一個<section>其中的背景圖像和<h1>裏面，每當我調整<h1>的font-size，圖像縮放到某一點。調整字體大小使我的容器背景圖像的比例尺

我已經脫掉了<h1>的塊級分配，我已經設置了絕對定位，取消了line-height和其他許多事情。有一點，字體能夠增加而不會影響<section>的背景大小，但現在我似乎無法在不影響背景圖像的情況下調整font-size。

驗證碼：

.mis_banner h1 { 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 140%; 
 
    font-weight: bold; 
 
    font-size: 60px; 
 
    display: inline-block; 
 
    width: 49%; 
 
} 
 
.mis_banner { 
 
    background: url(../images/HeroDT.jpg) center bottom no-repeat; 
 
    background-size: cover; 
 
    padding-top: 94px; 
 
}

<section class="mis_banner"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <h1 class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-slide-bottom" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: false}">READY, <br> SET, <br> COOK! 
 
     </h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-06-09 abtecas

這是設置background-size到scale的自然結果。當文字尺寸變大時，容器也需要變大以適應文本，並且背景需要變大以覆蓋容器。

如果你不想讓背景縮放，你可以刪除background-size，或將其設置爲一個特定的數字，如50px auto。

來源

2016-06-10 00:45:14 Alexskc

調整字體大小使我的容器背景圖像的比例尺

回答

相關問題