首页 > web前端 > html教程 > 有个效果没弄明白,请教高手_html/css_WEB-ITnose

有个效果没弄明白,请教高手_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 09:38:20
原创
813 人浏览过

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>ul li{   background: url("images/navbar.png") no-repeat scroll 100% 50% transparent;   float: left;   list-style: none outside none;   margin: 0 -1px 0 1px;}ul li a{   color: #C8DBE4;   text-decoration: none;   padding: 0px 10px;}ul li a:hover{   color: #FFFFFF;}  </style> </head> <body style="background-color: blue;"><ul><li><a href="index.php"><span>首页</span></a></li><li><a href="#"><span>注册</span></a></li><li><a href="#"><span>登录</span></a></li><li><a href="#"><span>帮助</span></a></li></ul> </body></html>
登录后复制


这是代码中的navbar.png图片


这里的虚线效果是怎么实现的呀?我试了一下,如果去掉navbar.png这个图片,就没有虚线了,为什么?


回复讨论(解决方案)

没什么不明白的,这站图片有 白色的点点竖线,然后通过背景图片位置更换到那个背景

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>ul li{   background: url("images/navbar.png") no-repeat scroll 100% 50% transparent;   float: left;   list-style: none outside none;   margin: 0 -1px 0 1px;}ul li a{   color: #C8DBE4;   text-decoration: none;   padding: 0px 10px;}ul li a:hover{   color: #FFFFFF;}  </style> </head> <body style="background-color: blue;"><ul><li><a href="index.php"><span>首页</span></a></li><li><a href="#"><span>注册</span></a></li><li><a href="#"><span>登录</span></a></li><li><a href="#"><span>帮助</span></a></li></ul><img  src="images/navbar.png"/ alt="有个效果没弄明白,请教高手_html/css_WEB-ITnose" ><!--增加图片就看到竖线了--> </body></html>
登录后复制

png支持透明背景。
不信你可以做一个简单的实验,建立一个背景为透明的PHOTOSHOP新文档,然后用白色画一根线,另存为PNG图像。用ACDSEE打开,图片是不是一片空白?但是你设置成  background: url("images/navbar.png") no-repeat scroll 100% 50% transparent; 的形式,白线还是白线,而不是一片空白。

图片是看不到样式的,不知道是我电脑问题,还是没有发好~~

白点不用图片也能做到吧

看了半天,你发的图片,右边有四个竖着排的白点,你好好看看
下载下来,打开放大看,在最右边上,中间地方,以它做背景了
你把图片去掉了,当然"虚线"就没有了

谢谢各位

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板