代码之家 › 专栏 › 技术社区 › 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并将其放置在左上角,对吗?

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前