html5中背景的平铺方式,固定,及位置的使用

作者:神奇的周 | 创建时间: 2023-08-02
html5是创建页面的一个强大的工具,如何做出一个漂亮的网页,可以吸引目光的网页,图片肯定不能少,我来简单介绍一下,如何使用html5做背景...
html5中背景的平铺方式,固定,及位置的使用

操作方法

打开软件, <!DOCTYPE html> 声明文件的类型<html> 文件开始 <head> 文件头部,不想让用户看到的东西大多放在里面  <meta charset="utf-8" />  <title>网页的标题</title> </head> <body>  用户看到的东西 </body></html>

网页的框架就打好了, 现在添加文字,<h1>渺渺兮秋风,洞庭波兮木叶下</h1> 这里使用的是标题标签,也可以使用<p></p>标签,因为h1标签字体比较大,所以我使用了, 我来使用内联样式表的方式来更改字体的颜色,大小,背景色,位置

首先在<head>声明<Style></Style>创建样式 因为使用的是<h1>标签,所以这里设置h1的样式,设置字体颜色color:#00f 字体颜色是RGB模式,表示形式为#加6位16进制的数字表示,R,00G,00B,00 #000000 代表黑色(可以简写成#000)#ffffff代表黑色(可以简写#fff),#00ff00可以简写#0f0;

首先在body里添加背景图片 background-image:url(图片在站点的位置);背景的平铺方式,默认的是全部填充(即沿x轴y轴全屏平铺),可以设置background-repeat:norepeat即为单个背景图填充,repeat-x沿x轴平铺,repeat-y沿y轴平铺, 背景图的位置默认是左上角,可以设置位置,background-position:x坐标,y坐标,或者left,center,right,、top,center,bottom

如果想让背景图片固定而文件内容滚动,可以添加background-attachment-fixed;表示背景固定,填充padding,在这里面有个重要的内容即为元素的空间大小,譬如设置p的height、width为200,200,那么padding :10px;之后元素的大小为220,220,他的填充为上下左右全部填充

!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style>   p{    background-color: #AAA;    width: 400px;    height: 400px;    padding: 10px;   }   body{    background-image: url(img/bookmodel.jpg);    background-repeat: no-repeat;    background-attachment: fixed;    background-position:  center;   }  </style> </head> <body>  <p>   渺渺兮秋风,洞庭波兮木叶下     </p> </body></html>

温馨提示

填充注意元素空间
点击展开全文

更多推荐