Heim > Artikel > Web-Frontend > 求解.如何给网页背景设置成一张不重复的图片?_html/css_WEB-ITnose
各位师哥师姐们,我想在写的html中将背景设置成有一张图片做成的背景。
就像这样的背景。求解求解,如何处理才能做成这样漂亮的
你可以去W3C中看看background-image这个属性
background:url(../myimg.png) no-repeat top center; /* top 图片靠上边, center 图片居中 */
或者单独设置
background-repeat:no-repeat; 图片不重复
------
background-repeat:repeat-x; 横向重复平铺
background-repeat:repeat-x; 纵向重复平铺
修正:
background-repeat:repeat-y; 纵向重复平铺
background:url(../myimg.png) no-repeat top center; /* top 图片靠上边, center 图片居中 */
或者单独设置
background-repeat:no-repeat; 图片不重复
------
background-repeat:repeat-x; 横向重复平铺
background-repeat:repeat-x; 纵向重复平铺
你可以去W3C中看看background-image这个属性
background:url(../myimg.png) no-repeat top center; /* top 图片靠上边, center 图片居中 */
或者单独设置
background-repeat:no-repeat; 图片不重复
------
background-repeat:repeat-x; 横向重复平铺
background-repeat:repeat-x; 纵向重复平铺
background:url(../myimg.png) no-repeat top center; /* top 图片靠上边, center 图片居中 */
或者单独设置
background-repeat:no-repeat; 图片不重复
------
background-repeat:repeat-x; 横向重复平铺
background-repeat:repeat-y; 纵向重复平铺
background:url(../bg.jpg) no-repeat top center; /* top 图片靠上边, center 图片居中 */
如果网页很长,那么肯定是要重复的,只是要做一张重复但感觉是一张图片的背景图片。(background:url(../bg.jpg) repeat-y center;)
既然你需要不重复的背景,但页面很长,你的背景图片可以 fixed 固定下来。
1、找一副足够大的图片 (能覆盖整个屏幕,至少 1920x1080px 及以上)
2、body{ background:url(bg.jpg) no-repeat fixed;} /* no-repeat 图片不重复, fixed 图片背景固定,不随页面滚动 */
参考页面 (仅近期内访问有效)
http://www.f808.cn/users/t.html
只能找一张足够大的图片,然后设置background:url(../myimg.png) no-repeat;否则很难达到你要的效果。
一张大图,至少可以覆盖一屏,然后把背景图固定住,就可以实现了。
抱歉,第一次结贴不是很会,导致大家没有得分。下次一定会给