Question

我使用background-clip属性用背景图片填充我的文本。出于某种原因，即使我正在使用的图像非常大，也会被剪切为文本左右边缘的背景。正如您将在屏幕截图中看到的那样，我正在松开字母“J”的一侧。这是在本文的右侧发生的，当我在那里有我的全名但是为了隐私而取而代之。我已经尝试删除填充以及放大文本的容器，但没有任何帮助，当我再次使我的文本成为纯色时，它不会被切掉。我不确定我使用的Big Text插件是否正在弄乱它。任何人都可以帮我这个吗？

http://i41.tinypic.com/2ms0suh.png

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<title>jessica n/a: PORTFOLIO</title>

<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico" />

<style>
    body
    {
        background: url(grungebg.png) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        margin:0 auto;
        padding:10px;
        max-width:600px;
        min-width:250px;
    }

    #container
    {
        text-align:center;
    }

    @font-face
    {
        font-family: 'league_gothicregular';
        src: url('leaguegothic-regular-webfont.eot');
        src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('leaguegothic-regular-webfont.woff') format('woff'),
        url('leaguegothic-regular-webfont.ttf') format('truetype'),
        url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .font1
    {
        font-family:league_gothicregular, sans-serif;
        color:#a7a7a7;
        background: -webkit-linear-gradient(transparent, transparent), url(mask.png);
        background: -o-linear-gradient(transparent, transparent), url(mask.png);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .font2
    {
        font-family: Quicksand, sans-serif; 
        font-weight:300;    
        color:#e5e5e5;
    }

    .font3
    {
        font-family:Playfair Display, serif;
        font-weight:700;
        font-style:italic;
        color:#b90504;
        background: -webkit-linear-gradient(transparent, transparent), url(colormask.png);
        background: -o-linear-gradient(transparent, transparent), url(colormask.png);
        background-position:center;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .font4
    {
        font-family: Quicksand, sans-serif; 
        font-weight:400;
        font-size:14px;
        color:#e5e5e5;
    }
</style>
</head>

    <body>

        <div id="container">
            <div class="font1">HELLO,</div>
            <div class="font2">my name is</div>      
            <div class="font3">jessica n/a</div>
        </div>
        <div id="extendedcontainer" class="font4">
            and I'm a student studying Graphic Communication Design at the _______ __ _______ _____________ ____ ___ ________ at the __________ of __________. I like to design websites and take pictures.
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script src="bigtext.js"></script>
        <script>



        jQuery(window).load(function () {
            $('#container').bigtext();

        });
        </script>
    </body>
</html>

Answer 1

我意识到这是一个非常老的问题，但是该解决方案可能会对遇到该问题的人有所帮助：

这实际上是由于标题的边框未通过文本本身的基线扩展而引起的，或者是由于字体具有连字或其他用于创建连接脚本字体的绑定技巧。您可以通过添加填充来欺骗边界框，以便为后代留出足够的空间，然后以相同的绝对值的负边距取反该填充，以使文本恢复到原始位置。

.font3 {
  padding-left: 0.2em;
  margin-left: -0.2em;
}

这也可以通过关闭被切掉的边界框的侧面在底部切下下降片来工作：

.font3 {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

背景剪辑属性 - 背景图像被切断

1 个答案: