有个效果没弄明白，请教高手_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:38 AM

<!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="/static/imghw/default1.png"  data-src="images/navbar.png"  class="lazy"  / alt="有个效果没弄明白，请教高手_html/css_WEB-ITnose" ><!--增加图片就看到竖线了--> </body></html>

登录后复制

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

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

白点不用图片也能做到吧

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

谢谢各位

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7333

Java教程

1627

CakePHP 教程

1351

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，