5

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

我正在使用 WYSIWYG 风格的编辑器（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 类是可重用的。

4

2 回答 2

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

现场演示

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

现场演示

<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%
}
于 2011-01-22T01:06:26.297 回答
0

要使用占位符使 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;
}
于 2011-01-22T01:09:48.090 回答