Background-clip 属性 - 背景图像被截断答案

【问题标题】：Background-clip property - background image is being cut offBackground-clip 属性 - 背景图像被截断
【发布时间】：2018-10-29 05:22:24
【问题描述】：

我正在使用 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>

【问题讨论】：

这似乎是因为背景仅跨越常规字符的宽度。尝试在文本前后放置一个空格，看看是否有帮助
呃，没救了。它仍然被切断。
@ZachSaucier 感谢您的建议！我让它与一起工作而不是一个普通的空间，现在它看起来很棒。希望这对其他人有帮助！

标签： css background-image

【解决方案1】：

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

这实际上是由于标题的边界框没有超出文本本身的基线，或者是由于字体具有连字或其他 em 绑定技巧来创建连接脚本字体。您可以通过添加填充来欺骗您的边界框为下降者提供足够的空间，然后使用相同绝对值的负边距来否定该填充，以使文本回到原来的位置。

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

这也可以在通过切换边界框被切割的一侧在底部被切断时也可以工作：

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

【讨论】：