代码之家 › 专栏 › 技术社区 › systempuntoout

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

css html jquery javascript

systempuntoout · 技术社区 · 14 年前

我想给站点添加一个“预览”条带。
我喜欢博客作者在你点击预览编辑一篇文章时所做的事情(anteprima是指用意大利语预览)。

你知道如何使它成为一个层,以便在不修改我的网站的主要HTML代码的情况下插入它吗?

alt text

你知道如何使它成为一个层,以便在不修改我的网站的主要HTML代码的情况下插入它吗?

4 回复 | 直到 14 年前

Rebecca Chernoff 14 年前

这是另一个选择。只是玩弄价值观。我在这个示例中使用了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>

Robert Koritnik 14 年前

你要么增加一个 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;
}

curly_brackets 14 年前

非常简单的解决方案

标记

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

CSS

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

Noufal Ibrahim 14 年前

你可以插入一个内容为半透明的PNG并将其放置在左上角,对吗?

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前

Eliable · 使点击计数器和进度条协同工作

6 月前

mlri · 从不同的onclick事件执行相同的javascript函数

6 月前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

6 月前

Jack Maessen · 在处理程序上使用时如何获取输入类型

6 月前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

6 月前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

6 月前