html - 如何使用 HTML/CSS 使文本相对于背景？

Question

我这样做是为了让我的背景图像缩放以适应视口(viewport)的大小。现在，我希望文本相对于背景图像进行缩放。注意:我使用的是 <img>背景图像的标记，因为这允许使用较小的浏览器窗口(即移动设备)进行缩放。

CSS

img.bg
{
    min-height: 100%;
    min-width; 781;

    width: 100%;
    height: auto;

    top: 0;
    left: 0;

    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 781)
{
    img.bg
    {
        left: 50%;
        margin-left: -390.5;
    }
}

#container 
{
    position: relative;
    top: 0px;
    width: 781;
    height: 758;
    border: 1px solid black
    z-index: 2;
}

#left
{   
    position: relative;
    left: 1.280409731113956%;
    top: 14.51187335092348%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    height: 50%;
    z-index: 2;
}   

p
{
    font: 14px Georgia;
    color: #FFFFFF;
}

HTML

<img class="bg" src="background.jpg">

<div id="container">
<div id="left">
    <p>Text</p>
</div>
</div>

Answer 1

据我所知，您不能单独使用 css 以这种方式动态缩放文本。

如果您使用类似这样的方法使选定的字体大小与 window.innerWidth 成比例，您也许可以使用 jQuery 来做到这一点。

function resizeText(event) {
       //your text element
       var $text = $('h2');

       if(window.innerWidth <= 781){

           //font scaling ratio
           var  fontSize = window.innerWidth/100;             
           $text.css('font-size', fontSize+'px');   

       } else {
           $text.css('');
       }
}

  //run above on window load and resize events
  window.onresize = resizeText;
  window.onload = resizeText;