Question

我想在网站上添加“预览”条带我喜欢当你点击预览编辑帖子时博客所做的事情（Anteprima意味着用意大利语预览）

alt text

你是否知道如何将其作为一个图层来插入它而不修改我的网站的主要html代码？

Answer 1

您需要在文档头中添加额外的DIV或添加额外的SCRIPT。使用DIV更简单，因为它会在不执行任何脚本的情况下立即出现。

示例HTML（版本1）：

<body>
    <div class="preview"></div>
    ...
</div>

示例HTML（第2版）：

<body>
    <img class="preview" />
    ...
</div>

示例CSS：

.preview
{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 100;
    /* omit all these if you use an IMG */
    width: 100px; /* adjust */
    height: 100px; /* adjust */
    background-image: url(...);  /* adjust */
    background-repeat: no-repeat;
}

Answer 2

这是另一种选择。只是摆弄价值观。我在这个示例中使用了webkit轮换。要获得更多轮播兼容性，请参阅here

CSS：

.preview {
    position:absolute;
    top:50px;
    left:-125px;
    width:400px;
    font-size:32px;
    text-align:center;
    background-color:#888; 
    color:#fff;
    border:1px solid black;
    -webkit-transform:rotate(-45deg);
    -webkit-transform-origin-x:50%;
    -webkit-transform-origin-y:0px;
}

和HTML：

<div class="preview">Preview</div>

Answer 3

非常简单的解决方案

标记

<img src="preview-image.png" class="preview">

的CSS

.preview {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
}

Answer 4

你可以插入一个带有内容的半透明PNG，并将它放在左上角，不是吗？

如何向我的网站添加“预览”条带

4 个答案: