在html中,怎么设置背景图片不重复不平铺,只显示一张图片

html-css027

在html中,怎么设置背景图片不重复不平铺,只显示一张图片,第1张

背景图片不重复不平铺,可以这样设定背景:

1、<body style="background-image: url("图片文件地址")background-attachment: fixed">

这样背景图片就会固定住,不会因页面滚动而重复。

2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺):

<body style="background-image: url("图片文件地址")background-repeat:no-repeat">

3、两者结合,就是:<body style="background-image: url("图片文件地址")background-repeat:no-repeatbackground-attachment: fixed">

扩展资料

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。

可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

参考资料 百度百科 HTML

1、新建一个文件夹,用来存放网页文件和图片,快捷键ctrl+shift+n。

2、进入新建文件夹里面,右键新建文本文档。

3、进入新建的文本文档,复制下方代码,点击快捷键ctrl+s保存后退出。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"><!--编码类型-->

<title>网页标题</title><!--网页标题-->

</head>

<body>

<!--W3c没有给出button背景图片的属性标准。但我们可以通过background-size:350px100px这两个值来控制背景图片【也可以用像素百分比%来控制】,然后通过background-color:transparent设置背景色为透明,即可达到给button添加背景图片的效果-->

<buttonstyle="background-image:url(1.png)width:350pxheight:100pxbackground-repeat:no-repeatbackground-size:350px100pxborder:0background-color:transparent">背景图片按钮</button>

</body>

</html>

4、重命名新建文本文档为index.html,原先的.txt的后缀同时去掉后保存,提示确实要更改后按“是”即可。

5、添加背景图片源文件,并命名为1.png,这些图片为你需要放置的图片。

6、点击index.html,右键浏览器打开预览效果。

7、浏览器打开后即可得到如下效果

1、首先打开Atom编辑器导入项目文件夹,先创建一个index.html的文件。定义一下html文件的主信息:

2、然后填写自己的网页内容, 设置一下样式,直接在body后面加上background="图片名字"即可插入图片:

3、最后来到浏览器,刷新一下网页,这样就会显示背景了: