Home >Web Front-end >HTML Tutorial >有个效果没弄明白，请教高手_html/css_WEB-ITnose
有个效果没弄明白，请教高手_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:38:20804browse
<!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; 的形式，白线还是白线，而不是一片空白。
图片是看不到样式的，不知道是我电脑问题，还是没有发好~~
白点不用图片也能做到吧
看了半天，你发的图片，右边有四个竖着排的白点，你好好看看
下载下来，打开放大看，在最右边上，中间地方，以它做背景了
你把图片去掉了，当然"虚线"就没有了
谢谢各位
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：新人求助，这类设计图纸该如何切片构图。_html/css_WEB-ITnoseNext article：Div显示问题！！_html/css_WEB-ITnose