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

Question

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

我正在使用一个所见即所得的编辑器（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 的小 sn-p，并可能使用 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

要使用占位符使 X 改变方面（如您的屏幕截图中所示），我会做类似的事情

<div class="placeholder">
    <img src="placeholder-xbox.png" />
</div>

与

.placeholder {  
    display: block;/* or display: inline-block; */
    width: 200px;
    height: 50px;
    background: url(logo.png) no-repeat center bottom;
}

.placeholder img {
    width: 100%;
    height: 100%;
    border: 2px solid black;
}

Answer 2

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

<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%
}

Live Demo

---

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

Live Demo

<div class="placeholder" style="width: 200px; height: 50px">
    <img src="http://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%
}