当前位置:  开发笔记 > 前端 > 正文

页面右上角的CSS

如何解决《页面右上角的CSS》经验,为你挑选了3个好方法。

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

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

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



1> jps..:

如果文本不是图像,则其他任何答案都不起作用.这里有一些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');
}


最好只使它成为一个图像,而不是使用W3C未经批准的样式.无论如何,他将不得不使用图像作为背景.不妨把文字扔在上面.

2> 小智..:

确保它是一个透明的PNG

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

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



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

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

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

推荐阅读
sx-March23
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有