Question

我正在设计一个包含背景图片的网页像箭头标签。我在Photoshop中设计了图像。我的问题是图像大小没有扩大和缩小每个文字。所以请帮帮我，我该怎么办？有没有办法做到这一点？

HTML：

        <label><span>First Name</span></label>

CSS：

        label
        {
        background-image:url('./images/lblimg.png');
        width:auto;
        display:inline-block;
        }


    span
         {
            line-height:50px;text-align:center;
         }

Answer 1

使用样式：

background-size: cover;
background-repeat: no-repeat;

使用background-size:cover，图像将尽可能大，以便背景区域完全覆盖。

Answer 2

您需要为background-size和100%设置with属性为height。

.bgimg{
    background-image: url(https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png);
    background-size: 100% 100%;
    font-size: 40px;
    color: yellowgreen;
}

<span class="bgimg">
    div with little text :) 
</span>
<br />
<span class="bgimg">
    div with more and more and more text :) 
</span>

Answer 3

您有两种选择，都使用CSS3 background-size：

使用background-size: cover：背景图片将尽可能大，直至覆盖整个背景区域。
- 优点：
  - 图像将覆盖整个区域
  - 图像不会被拉伸
- 缺点：
  - 由于图像没有伸展，只要它覆盖整个区域，图像的某些部分可能无法显示。
使用background-size: 100% 100%：背景图片将占据容器宽度和高度的100％。
- 优点：
  - 图像将覆盖整个区域
  - 将显示整个图像（无隐藏部分）
- 缺点：
  - 图像可能被拉伸（虽然这可能被视为专业人士，特别是对于问题中预期的行为）

在您的特定情况下，第二个选项会更好，因为您希望显示整个箭头而不会冒隐藏某些部分的风险。

在您的代码中，它看起来像这样：

label
{
     background-image:url('./images/lblimg.png');
     background-size:100% 100%;
     width:auto;
     display:inline-block;
}

编辑（根据OP的CSS2请求）：除非您更改HTML代码，否则无法使用CSS2专门实现。在这种情况下，您实际上不会使用背景图像，而是直接使用文本后面的图像。

这就是HTML的外观：

<label>
    <img src="http://lorempixel.com/400/200/animals/" alt="Random pic" />
    <span>First Name</span>
</label>

这就是CSS的外观：

label {
    width:auto;
    display:inline-block;
    position:relative;
}

span {
    line-height:50px;text-align:center;
    position:relative;
    z-index:2;
}

img {
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

您可以在此JSFiddle上看到CSS3和CSS2解决方案的示例：http://jsfiddle.net/othnjk5x/

如何使用css拉伸和缩小文本标签的背景图像

3 个答案: