把图片的最左边或者竖着切一两个像素 在浏览器里面横铺 在把图片放在中间居中 那样看上去就是平铺效果 这种方法只限于有规律的图片
成都创新互联是一家专业提供曲靖企业网站建设,专注与网站建设、做网站、H5建站、小程序制作等业务。10年已为曲靖众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
HTML5网页在电脑端和手机端都全屏显示的步骤如下：
1、打开HTML5网页代码。
2、在网页头部加上新代码，让网页的宽度自适应设备的宽度。代码如下：
meta name="viewport" content="width=device-width
initial-scale=1.0
maximum-scale=1.0
minimum-scale=1.0
user-scalable=no" /
3、在输入代码完成后，把图片包括图片DIV 的宽度设置成百分之百即可。
//HTML - From qifeiye.com
img src="images/bg.jpg" id="bg" alt=""
//CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
或者
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
或者
//HTML - From qifeiye.com
img src="images/bg.jpg" id="bg" alt=""
/CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
//jQuery
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
第一种，用HTML5的方式，background: cover;
第二种，把背景换成单独的层，用绝对定位，浮在内容下面模拟背景，然后设置图片宽高为100%
项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。
在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google
chrome
15
+,
safri5.1+,firfox10+,IE11支持
全屏
var
docElm
=
document.documentElement;
//W3C
if
(docElm.requestFullscreen)
{
docElm.requestFullscreen();
}
//FireFox
else
if
(docElm.mozRequestFullScreen)
{
docElm.mozRequestFullScreen();
}
//Chrome等
else
if
(docElm.webkitRequestFullScreen)
{
docElm.webkitRequestFullScreen();
}
//IE11
else
if
(elem.msRequestFullscreen)
{
elem.msRequestFullscreen();
}
