html5平铺图片代码，html中平铺

html中怎么样可以让图片平铺在方框里?

将background-size设置为cover就会强行拉伸，然后使用background-repeat：no-repeat。强行拉伸会看起来很奇怪，所以background-size可以支持从宽和高两个方向自由设置绝对和相对大小。

设置成背景图片，优点是简单方便，缺点也很明显，很不好控制，尤其是背景尺寸样式还有兼容问题需要担心。将图片设置成绝对定位，父元素设置成相对定位。这个最普遍，简单，位置尺寸也好控制。模拟一个input框的样式。

如图，在代码工具中，先建好几个图片，如图这里的img图片被div盒子包含；然后将盒子设置宽度，然后浮动；图片填充整个盒子大小。效果就是这样的，如图。

border-image属性的平铺方式有3种：repeat、round、stretch。取值为repeat时，表示4条边的图片会不断重复，超出元素部分将会被剪切掉。取值为round时，表示4条边的图片会铺满。为了铺满，边框图片会压缩或拉伸。

相关问答

Q1: dw中用HTML如何将背景图片平铺?

首先，打开dw编辑器，新建html文件，例如：index.html。

如果是页面背景，可以选择属性框中的 页面属性—外观—背景图像—重复（可选多种重复、不重复、横向重复、纵向重复）具体效果，一试便知。

url(图片路径，名称)。repeat-x是横向平铺，repeat-y是纵向平铺，repeat就是横纵都平铺。三选一就可以了。

图片不够大，又background属性不能拉伸图片；只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用；body的background属性去掉，要不然会被遮住。

Q2: 在html中怎样使背景图片拉伸,平铺,居中?

在css标签内，再通过将background-position属性设置为“center right”，实现背景图片靠右居中。最后在浏览器打开test.html文件，查看实现的效果。

图片不够大，又background属性不能拉伸图片；只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用；body的background属性去掉，要不然会被遮住。

使用此代码：img border=0 src=/jpg width=100% height=100% style=position： absolute；left：0px；top：0px；z-index： -1或者background-size：cover。

关于html5平铺图片代码和html中平铺的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。