Question

我是CSS的新手。 我需要在Square 上显示一个数字（通过ASP.NET MVC动作方法动态生成）（正常图像，其面部需要用动态数字替换）。

有人可以协助我这样做。我相信一个知道CSS的人只需要一分钟。

谢谢，维杰

Answer 1

使用CSS background并将图片放在数字后面？

Answer 2

最简单的方法是创建一个<div>，将您的图片用作背景图片属性。那么只需将数字写入该div：

<强> HTML

<div class="square">
    123
</div>

<强> CSS

.square {
    /* following are width and height of your background image */
    width: 100px;
    height: 100px;
    background: url(yourimg.png) no-repeat 0 0;
}

如果你必须使用<img>标签，这有点棘手，但仍有可能：

<强> HTML

<div class="square">
    <span>123</span>
    <img src="yourimg.png" /> 
</div>

<强> CSS

.square {
    /* following are width and height of your background image */
    width: 100px;
    height: 100px;

    position: relative;
}

.square img {
    position: relative;
    z-index: 1;
}

.square span {
    position: absolute;
    z-index: 2;

    /* Use to position your number */
    top: 10px;
    left: 10px;
}

以上工作原理是创建一堆元素，底部为<img>（由于z-index较低），数字位于绝对位于其上方。这是有效的，因为数字的父级（<div class="square">）具有相对位置，因此它成为坐标系。

Answer 3

你应该可以使用div中的彩色div和文本（数字）。您可能需要稍微调整一下CSS以形成完美的正方形。

<div style="border: 1px solid black; background-color: red; color: white; font-size: 18px; padding: 15px;">
    <%: Model.RandomNumber %>
</div>

如何使用CSS将数字（动态生成）显示为正方形

3 个答案: