如何適應背景圖像內的內容

如何確保某些內容始終適合網頁的特定區域？如何適應背景圖像內的內容

作爲一個例子，我希望句子「Fit this inside」出現在背景圖片的內部。這裏是我的test.html文件：

<!DOCTYPE html> 
<html lang="en"> 
    <link href="test.css" rel="stylesheet" type="text/css"> 
    <body>Fit this inside</body> 
</html>

這裏是我的test.css文件：

body 
{ 
    background-image: url('bg_img.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size:100% 68%; 
    overflow: scroll; 
}

這將導致文本「適合這裏面的」顯示在頁面的最頂端，而不是背景中圖像區域。

這樣做的正確方法是什麼？

的jsfiddle：http://jsfiddle.net/u3TAF/

來源

2013-12-20 Dirty Penguin

請提供http://jsfiddle.net/ – enyce12

看起來像你的背景大小（高度）爲68％ - 因此它在高度的16％開始。您可以在任何塊（div/p）中找到您的文本，並將其設置爲最高16％。 *編輯 - 這是16％（32/2） –

看看我的評論更高。您已將背景圖像設置爲68％的高度。將文本設置爲具有相同屬性的容器。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> Bla! </title> 
     <style type='text/css'> 
      body 
      { 
       background-image: url('image.png'); 
       background-repeat: no-repeat; 
       background-position: center center; 
       background-attachment: fixed; 
       background-size:100% 68%; 
      } 
      div.container { 
       position:absolute; 
       top:16%; 
       height: 68%; 
       left: 0%; 
       overflow:auto; 
      }   
     </style> 
    </head> 
    <body> 
     <div class='container'> 
      Now it's fit! 
     </div> 
    </body> 
</html>

來源

2013-12-20 18:47:06

工作。謝謝：） –

背景圖像應給予的父元素。就你而言，在CSS中，將背景圖像屬性附加到<html>元素。所以這張圖片會作爲背景全部這個頁面的內容。

如果這是你的目標是什麼，然後：

html{ 
     background: url('bg_img.png') no-repeat center center fixed; 
    }

來源

2013-12-20 18:41:51

我試過這個，但是文字仍然在圖像之外。 –

我認爲最好的選擇是將文本放在DIV中，然後將樣式應用到該元素。沿線的某處：

<html> 
<head> 
<style type="text/css"> 
#test{ 
    background-image: url('bg_img.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size:100% 68%; 
    overflow: scroll; 
    } 
</style> 
</head> 
<body> 
<div id="test"> 
Fit This Inside 
</div> 
</body> 
</html>

來源

2013-12-20 18:47:33 KM123

如何適應背景圖像內的內容

回答

相關問題