Home > Web Front-end > HTML Tutorial > 求解.如何给网页背景设置成一张不重复的图片?_html/css_WEB-ITnose

求解.如何给网页背景设置成一张不重复的图片?_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:37:54
Original
2711 people have browsed it

各位师哥师姐们,我想在写的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这个属性


thanks 

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-repeat:no-repeat; 图片不重复

------
background-repeat:repeat-x; 横向重复平铺
background-repeat:repeat-y; 纵向重复平铺
这段程序,只会运行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;否则很难达到你要的效果。

一张大图,至少可以覆盖一屏,然后把背景图固定住,就可以实现了。

抱歉,第一次结贴不是很会,导致大家没有得分。下次一定会给

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template