css如何实现让文字透明
首先说下要实现的效果有一张背景，上面有文字连接，我要把文字设置为透明，连接还好用，请问怎么办？用什么样式能让文字透明？连接好用。我这么做的目的是为了SEO。代码基本如下<...
首先说下要实现的效果
有一张背景，上面有文字连接，我要把文字设置为透明，连接还好用，请问怎么办？用什么样式能让文字透明？连接好用。
我这么做的目的是为了SEO。代码基本如下
<div class="aa">
<li class="bg"><a hear="#">abc</a></li>
</div>
说明下 bg样式现实的是个图片 但是要abc隐藏 连接还好用
高手们帮下忙 展开
有一张背景，上面有文字连接，我要把文字设置为透明，连接还好用，请问怎么办？用什么样式能让文字透明？连接好用。
我这么做的目的是为了SEO。代码基本如下
<div class="aa">
<li class="bg"><a hear="#">abc</a></li>
</div>
说明下 bg样式现实的是个图片 但是要abc隐藏 连接还好用
高手们帮下忙 展开
8个回答
展开全部
方法是可以实现是，就是在链接a中的abc前后加一个span标签就可以了。
下面是完整的代码。
<!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>
<style type="text/css">
a{text-decoration:none;}
ul,li{list-style: none;margin:0;padding:0;}
li.bg a span{visibility:hidden;}
</style>
</head>
<body>
<div class="aa">
<ul>
<li class="bg"><a href="#"><span>abcdefghijk</span></a></li>
<li>隐藏的文字在左上角，鼠标放上去看看</li>
</ul>
</div>
</body>
</html>
PS：SEO中通过这样的方法Google会判断你是作弊的，所以最好不要用这种方法，如果你只是想在一个背景图片上面做链接，可以做一个1x1像素的gif透明图片，然后给写成<a href="#" class="mylink"><img src="images/spacer.gif" alt="abc" /></a>
其中的alt写成你要seo的信息，这样也能起来 seo 的作用，而且不会被认为是作弊。
再给你上面的class=aa这个div写一个position: relative，然后再给那个透明的gif图片链接所在层.mylink定义一个position: absolute，通过top和left来绝对定位链接的位置
再通过.mylink img{width: 100px;height: 22px;}的方法定义宽度和高度，这样就大功告成了。
下面是完整的代码。
<!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>
<style type="text/css">
a{text-decoration:none;}
ul,li{list-style: none;margin:0;padding:0;}
li.bg a span{visibility:hidden;}
</style>
</head>
<body>
<div class="aa">
<ul>
<li class="bg"><a href="#"><span>abcdefghijk</span></a></li>
<li>隐藏的文字在左上角，鼠标放上去看看</li>
</ul>
</div>
</body>
</html>
PS：SEO中通过这样的方法Google会判断你是作弊的，所以最好不要用这种方法，如果你只是想在一个背景图片上面做链接，可以做一个1x1像素的gif透明图片，然后给写成<a href="#" class="mylink"><img src="images/spacer.gif" alt="abc" /></a>
其中的alt写成你要seo的信息，这样也能起来 seo 的作用，而且不会被认为是作弊。
再给你上面的class=aa这个div写一个position: relative，然后再给那个透明的gif图片链接所在层.mylink定义一个position: absolute，通过top和left来绝对定位链接的位置
再通过.mylink img{width: 100px;height: 22px;}的方法定义宽度和高度，这样就大功告成了。
参考资料： 个人心得
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
感谢楼上的批评指正，在下回帖过于匆忙。高手云集，小女子自愧不如。
你所说的文字透明其实就是将文字移到浏览器看不到的地方。
修改过的
这就用到CSS的一个很有用的属性：
eg：
.bg{text-indent:-9999px;}
.bg a{display:block;}
希望能帮到你。
你所说的文字透明其实就是将文字移到浏览器看不到的地方。
修改过的
这就用到CSS的一个很有用的属性：
eg：
.bg{text-indent:-9999px;}
.bg a{display:block;}
希望能帮到你。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
对楼上写的东西相当无语。。
1.属性名称写错
2.后面的数字没有单位
3.用正值的数字能把文字移动到屏幕外？
正确的写法是：
.bg{text-indent:-9999px;}
注：这个写法把bg内的内容移到屏幕外，所以你的连接也是在屏幕外的！
所以你要连接有效，而且文字是有效的，可以把a标签块状化。再指定宽高，再把a标签内的文字移出去：
.bg a{display:block;width:100px;height:20px;text-indent:-9000px;}
1.属性名称写错
2.后面的数字没有单位
3.用正值的数字能把文字移动到屏幕外？
正确的写法是：
.bg{text-indent:-9999px;}
注：这个写法把bg内的内容移到屏幕外，所以你的连接也是在屏幕外的！
所以你要连接有效，而且文字是有效的，可以把a标签块状化。再指定宽高，再把a标签内的文字移出去：
.bg a{display:block;width:100px;height:20px;text-indent:-9000px;}
已赞过
已踩过<
你对这个回答的评价是？
展开全部
.bg a{
display:block;
zoom:1;
opacity:0;/*标准浏览器*/
-moz-opacity:0;/*ff*/
filter:alpha(opacity=0);/*IE滤镜，opacity值0-100，貌似只实用于块级的元素，所以我上面加了display:block;zoom:1;触发效果*/
}
其他样式LZ自己协调。
另外LZ html有问题
li标签必须在ul标签内。
a标签的hear属性应该是href。
<div class="aa">
<ul><li class="bg"><a href="#">abc</a></li></ul>
</div>
display:block;
zoom:1;
opacity:0;/*标准浏览器*/
-moz-opacity:0;/*ff*/
filter:alpha(opacity=0);/*IE滤镜，opacity值0-100，貌似只实用于块级的元素，所以我上面加了display:block;zoom:1;触发效果*/
}
其他样式LZ自己协调。
另外LZ html有问题
li标签必须在ul标签内。
a标签的hear属性应该是href。
<div class="aa">
<ul><li class="bg"><a href="#">abc</a></li></ul>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般情况下使用文字缩进text-index 设置一个比较大的值或者比较小的值 就行了 但是这个文字上是不能放链接的 放了链接文字一缩进就点不到了
比较推荐的方法是在在图片上加链接，然后把文字写在后面，再通过缩进让文字不在页面内显示。
比较推荐的方法是在在图片上加链接，然后把文字写在后面，再通过缩进让文字不在页面内显示。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
