Home >Web Front-end >HTML Tutorial >css平铺的问题_html/css_WEB-ITnose
css平铺的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:42:371399browse
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <style type="text/css"> .panel-header{ width:100px; height:30px; background-image: url('corners-sprite.gif'); background-repeat: repeat-x; } </style> </head> <body> <div class="panel-header"></div> </body></html> -------------------------------
结果:
我希望能成这样
请问该如何做？这是原图
回复讨论(解决方案)
我想了很长时间,如果单独用背景弄成这样是不可能的！
所以我给的代码你看看！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <style type="text/css"> .panel-header{ width:100px; height:30px; } .s{ width:8px; float:left; height:30px; border:0px; background-image:url(1365855364_1272.gif); background-repeat:no-repeat; background-position:-2px 0px; } </style> </head> <body> <div class="panel-header"> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> </div> </body></html> 把原图改成一像素宽度的 可以平铺的的图片
虽然css3 支持 border－image的 九宫格拼图
这个有边框的一般要做成宽度超过屏宽的一条，然后还要做两容器，一个上级容器放这条，并居右，然后下级的第一个容器再放一次，但这次居左，具体可以搜一下滑动门效果。
图片有问题啊，弄成1像素宽的再平铺。
估计你图片切的有问题，估计你是在ps里用裁切工具裁的，这样裁的话会把整个样式也给切出的。
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：javascript如何将10（分）转换为0.10（元）？_html/css_WEB-ITnoseNext article：像csdn博客文章中图片和文字、代码等的排版是如何在服务器数据库中存储的？_html/css_WEB-ITnose