CSS之利用text-indent隐藏文字用图片当Login

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏文字</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="logo"><a href="#">博客网</a></h1>
</body>
</html>

--------------------------------------------------------------------分 割线看什么看----------------------------------------------------------------------------

css:

方式一:

#logo a {
    background:url(http://images.cnblogs.com/adminlogo.gif) left top no-repeat;
    height: 51px;
    width: 133px;
    text-indent:200px;
    white-space:nowrap;
    overflow:hidden;
    display:block;
}

方式二:

#logo a {
    background:url(http://images.cnblogs.com/adminlogo.gif) left top no-repeat;
    height: 51px;
    width: 133px;
    text-indent:-200px;
    white-space:nowrap;
    display:block;
}

 

效果如图:

你可能感兴趣的:(CSS之利用text-indent隐藏文字用图片当Login)