css 全屏显示一张图片_css3背景图片全屏显示的例子

背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了，下面我们就来看一篇关于css3背景图片全屏显示例子了，具体的如下所示。

如何用css背景图片拉伸以及100% 满屏显示呢？这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。

比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。

所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类：

1.是一整张大图，尺寸和区域大小刚好吻合

2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。

但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。

而且这个属性在firefox，chrome，以及ie9上都可以使用。

背景图尺寸(数值表示方式)：

CSS代码

#background-size{

background-size:200px 100px;

}

背景图尺寸(百分比表示方式)：

CSS代码

#background-size2{

background-size:30% 60%;

}

背景图尺寸(等比扩展图片来填满元素，即cover值)：

CSS代码

#background-size3{

background-size:cover;

}

背景图尺寸(等比缩小图片来适应元素的尺寸，即contain值)：

CSS代码

#background-size4{

background-size:contain;

}

背景图尺寸(以图片自身大小来填充元素，即auto值)：

CSS代码

#background-size5{

background-size:auto;

}

例子

蚂蚁部落

html{

background:url(mytest/demo/antzone.jpg) no-repeat center center fixed;

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

}

上面的代码实现了全屏自适应的要求，并且图片会等比例缩放，不会出现变形现象。

css 全屏显示一张图片_css3背景图片全屏显示的例子相关推荐

html中背景图片自动全屏显示,HTML设置body背景图片全屏显示
JMeter中返回Json数据的处理方法 Json 作为一种数据交换格式在网络开发,特别是 Ajax 与 Restful 架构中应用的越来越广泛.而 Apache 的 JMeter 也是较受欢迎的压力 ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
css背景图片全屏显示加居中显示
css背景图片全屏显示加居中显示,屏幕过大平铺屏幕过小居中裁剪 div { background:url(/i/bg_flower.gif); background-size:cover; -moz ...
CSS：实现background-image背景图片全屏铺满自适应
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直.水平均居中 */background-position: center c ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
uniapp 背景图片全屏显示在整个页面
要让uniapp中的背景图片全屏,可以在<style>标签中添加以下样式: page {background-image: url('/static/bg.jpg');background ...
html加入图片如何自动平铺,html怎么设置背景图片全屏平铺？
html怎么设置背景图片全屏平铺? 1.新建一个html文档. 2.设置一下HTML的框架,然后把图片设置在同一个文件夹里面. 3.加入,这样可以有样式设置. 4.因为背景设置在主体,所以还要定义为b ...
html怎么设置背景图一张图平铺,html怎么设置背景图片全屏平铺？_WEB前端开发...
ps画笔工具快捷键是什么?_WEB前端开发 ps画笔工具的快捷键是"B":默认使用前景色绘图,通过设置后可以多种色彩一起绘制.ps的画笔分为了4类:常规画笔.干介质画笔.湿介质画笔 ...
html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...

css 全屏显示一张图片_css3背景图片全屏显示的例子

css 全屏显示一张图片_css3背景图片全屏显示的例子相关推荐

最新文章

热门文章