占位符框的 CSS（设计时所见即所得）

Question

这是一个“愚蠢的”但希望是合法的，如果不是特别必要的挑战，设计师可以在任何地方重复使用，我敢肯定，如果可以得到答案。

我正在使用 WYSIWYG-ish 编辑器 (MS Expression Web 4) 并试图生成基于 HTML 的线框，我打算将其作为实际生产的基础。原始/干净的 HTML 是 #1 目标，我想有一个占位符的模式，我可以指定以下 HTML（除了高度、宽度和文本会有所不同外，没有其他内容），它应该显示为矩形带有“X”的框，文本（在本例中为“徽标”）出现在底部或中间，文本后面有白色背景：

<div class="placeholder" style="width: 200px; height: 50px;">Logo</div>

我的问题是实现我想要的效果所需的 CSS 和最少的 HTML 标记（例如 img 标签）是什么？例如，如果使用以下 HTML：

<div class="placeholder">
    <img src="placeholder-xbox.png" width="200" height="200"/>
    Logo
</div>

或者

<div class="placeholder">
    Logo
    <img src="placeholder-xbox.png" width="200" height="200"/>
</div>

这在 HTML 方面是可以接受的折衷方案，但是要使这项工作发挥作用的 CSS 是什么？

我知道我可以使用 jQuery 来劫持干净的 HTML 来生成肮脏的 HTML 来实现我想要做的事情，但我在设计时需要这个。

下面这个假截图正是我要找的。我想删除一小段干净的 HTML，并可能使用 WYSIWYG 界面中的锚点来缩放占位符，而标签保持在中间底部或中间中间。

我有一个白色的图像，上面有一个黑色的 X。

我非常怀疑 CSS 是否会在不破坏 HTML 的情况下支持我想要的内容。但是，我想看看是否有人知道它是否可行。这是我的开始，这当然不起作用，因为背景图像不会缩放，文本不会垂直对齐，等等。

.placeholder { 
 display: inline;
 background-image: url('placeholder-xbox.png');
 border: 2px solid black;
    vertical-align: bottom;
}

所以现在我必须弄清楚要做出哪些妥协。我讨厌搞砸 HTML，也不介意搞砸 CSS，因为 CSS 类是可重用的。

Answer 1

当我想要这样的占位符时，我倾向于这样做：

<div id="logo">logo</div>和#logo{ background:#ccc; border:1px solid red }。

所以，对于你来说，它看起来像这样：

<div class="placeholder" style="width: 200px; height: 50px">
    Logo
</div>

.placeholder {
    background: #ccc;
    border: 1px solid red;
    text-align: center
}

需要额外的标记才能获得底部的文本：

<div class="placeholder" style="width: 200px; height: 50px">
    <span>Logo</span>
</div>

.placeholder {
    background: #ccc;
    border: 1px solid red;
    text-align: center;
    position: relative
}
.placeholder span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}

现场演示

刚刚写完所有这些后，我意识到将其修改为您所描述的创作是多么容易；尝试这个：

现场演示

<div class="placeholder" style="width: 200px; height: 50px">
    <img src="https://i.stack.imgur.com/yZlqh.png" />
    <span>Logo</span>
</div>

.placeholder {
    background: #ccc;
    border: 1px solid #000;
    text-align: center;
    position: relative;
    font-weight: bold
}
.placeholder span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}
.placeholder img {
    width: 100%;
    height: 100%
}