页面右上角的CSS

Question

如何在图像中显示右上角div.我想做类似的事情虽然不完全一样.我认为文字不是图像.

替代文字http://i41.tinypic.com/2ibgbgj.jpg

此外,我看到一些网站在鼠标位于右上角部分时具有页面悬停效果.知道怎么做吗？

Answer 1

如果文本不是图像,则其他任何答案都不起作用.这里有一些css旋转div 45度并在IE + FF + Webkit中工作.

#yourdiv
{
    top: 0px;
    right: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     transform: rotate(45deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476', M12='-0.7071067811865475', M21='0.7071067811865475', M22='0.7071067811865476', sizingMethod='auto expand');
}

Answer 2

确保它是一个透明的PNG

#Element {
   position: fixed;
   top:0;
   right:0;
z-index:10;
}

(堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面.)

Answer 3

div.topRight {
    position: absolute;
    top: 0%;
    right: 0%;
}

这将在右上角分配一个设为"topRight"的类.我相信你可以弄清楚如何让图像正确显示出来.确保在其上设置适当的宽度和高度.至于悬停,你想要什么确切的效果？如果你想做的话,你可以轻松地在悬停时修改CSS.

div.topRight:hover {
    // new css rules
}