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

WBOY
풀어 주다: 2016-06-24 11:37:54
원래의
2656명이 탐색했습니다.

各位师哥师姐们,我想在写的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;否则很难达到你要的效果。

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!