189 8069 5689

html5背景图片,html5背景图片代码

html5如何把一个图片设为页面的全屏背景?

//HTML - From qifeiye.com

成都创新互联是一家专业提供舟山企业网站建设,专注与网站建设、成都网站建设H5场景定制、小程序制作等业务。10年已为舟山众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

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");

});

HTML 5 关于设置背景图片的问题

是不是相对路径的问题,现在截图的HTML 是不是 那个 网页半透明.html 是的话,直接写 JPG 图片的名字就可以了

html5怎么设置整页背景图片

html5加背景图片可以通过:

1.首先可以去写一个div,然后这个div当然宽高是一定要有,然后在div中去设置要的背景图片,是否重复等属性,repaet这个来设置,no-repeat(是不重复)、repeat-x(沿着x轴重复)、repeat-y(沿着Y轴重复)这里我提交一段代码:

div id = 'test'/div

style

#test{

width:300px;

height:400px;

background:url('图片的地址')no-repeat;

}

/style

这样背景图片就设置好了!

html5手机页面背景图片自适应大小问题

1,输入position:fixed;top:0;left:0;将整个div固定在屏幕的顶部和左侧。

2、输入width:100%;height:100%;min-width:1000px;这个可以适合div的高度和宽度,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变。

3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。

4、输入background-position:center0;使图片的位置,居中,靠左对齐。


当前名称:html5背景图片,html5背景图片代码
文章转载:http://jkwzsj.com/article/hocsdj.html

其他资讯