Javascript 如何添加一个“；预览“；带到我的站点

我想向站点添加“预览”条带。
我喜欢blogger在你点击预览编辑帖子时所做的事情（Anteprima在意大利语中的意思是预览）

---

您知道如何将其作为一个层，以便在不修改我的站点的主html代码的情况下插入它吗？

您必须在文档头中添加一个额外的

DIV

或添加一个额外的

脚本。使用DIV更简单，因为它将立即存在，而不执行任何脚本

示例HTML（版本1）：

你可以插入一个半透明的PNG，将内容放在左上角，不是吗？
这里有另一个选择。只是摆弄一下价值观。我在这个示例中使用了webkit旋转。有关更多旋转兼容性，请参见

CSS:

以及HTML：

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

预览
非常简单的解决方案

加价

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

这很好，但它不是一个浏览器范围的解决方案。@Robert请参阅我关于旋转兼容性的说明。我只是没有列出其他选项。这似乎也是博客作者所使用的。
.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;
}

.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;
}

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

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

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