css-图片铺满屏幕

方法一:

 1 <style>
 2 *{font-family:微软雅黑;}
 3 img{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;}
 4 .word{padding-left:15px;padding-right:15px;margin:20px auto;color:#ccc;font-size:15px;}
 5 .header{text-align:center;line-height:35px;color:#f60;font-size:24px;}
 6 </style>
 7
 8 </head>
 9 <body>
10 <img src="bg0.jpg" alt="loginBg">
11 <div class="word">
12     <div class="header">Hello you</div>
13     Your time is limited, so don‘t waste it living someone else‘s life. Don‘t be trapped by dogma - which is living with the results of other people‘s thinking. Don‘t let the noise of other‘s opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.  <br /> -- Steve Jobs
14 </div>
15 </body>

方法二:

 1 <style>
 2 body{background:url(bg2.jpg) no-repeat center top;height:100%}
 3 .word{padding-left:15px;padding-right:15px;margin:20px auto;color:#ccc;font-size:18px;}
 4 .header{text-align:center;line-height:35px;color:#f60;font-size:24px;}
 5 </style>
 6
 7 </head>
 8 <body>
 9 <div class="wrap">
10     <div class="header">Hello you</div>
11     Your time is limited, so don‘t waste it living someone else‘s life. Don‘t be trapped by dogma - which is living with the results of other people‘s thinking. Don‘t let the noise of other‘s opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.  -- Steve Jobs
12 </div>
13 </body>
时间: 2024-10-11 01:51:50

css-图片铺满屏幕的相关文章

背景图片铺满屏幕-------Day85

你有没有遇到过一种情况,你特别喜欢一张图片,可是可惜的是这张图片就小了那么一丁点.但有小片留白啊,那就不好看了啊.你有没有过呢,我不知道,但我真的就碰到了.我特喜欢那张图,就想让它做背景,可就小了点.于是我就想办法了. background-size:cover: background-size:contain. 两个看起来几乎相同,实际原理还真不一样: cover.翻译过来就是"覆盖",这是纯正的背景铺满了元素,它会比較图片的长和宽.哪一个比較小,它就以哪一个为基准进行扩大.图片的本

Android中如何在ViewPager中使动态创建的ImageView铺满屏幕

最近在做东西的时候,有一个要求,就是把用于在ViewPager里面轮播的图片铺满屏幕,但是中间遇到的问题是,ImageView与屏幕之间总是有空隙,情况如下图所示: 当时第一反应时考虑用LayoutParam,可是几经尝试无果,后来在网上找到了解决方案,只要在创建ImageView的时候,把ImageView的属性ScaleType设为FIT_XY然后问题就解决了,具体的代码如下: ImageView imageView=new ImageView(context); imageView.set

&lt;video&gt;全屏状态下视频没有铺满屏幕

在使用videojs初始定宽高或者给<video>写定宽高后,在全屏状态下会导致视频在左上角展开,保持着之前写定的宽高,而没有实现真正全屏. 如果通过JS在点击全屏按钮后改变video的宽高,需要查阅videojs文档,实现方式比较复杂(原因还是太菜). 其实通过CSS实现全屏是最方便的,只需要在video外部套一个<div class="videoWrap">, 然后把原本需要的宽高写在videoWrap上,对于<video>我们只要给一个{wid

height与min-height的百分比问题和铺满屏幕的布局方法

1.height的百分比 当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效. <div id="container1"> <div id="wrap"> wrap's height work </div> </div> <br> <div id="container2&q

页面内容不足以铺满屏幕高度时,footer居底显示

在项目中常常会遇到这样的问题:页面主要内容不足以铺满一个屏幕的高度,footer下面就会有白块剩余. 现在要实现的效果就是,在主要内容不足以铺满整个屏幕的情况下,footer居于屏幕低部显示,使得整个页面占满屏幕.而当主要内容高度大于整个屏幕高度的时候,footer跟随主要内容进行显示: 方法一: html [html] view plain copy <div class="page"> 主要页面 </div> <footer>底部</foo

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好: 眼过千遍不如手过一遍,这就把需要记忆的东西记下来. 很多时候我们遇到的情况是: 设置背景图片background-image:url(xxx.jpg); 如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了 background-size: cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域. 这个属性有四个值: length 设

IE9以下通过css让html页面背景图片铺满整个屏幕

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="chaozhang5"> <meta name="mail" content=&qu

背景图片铺满body

添加背景图片: 添加样式代码如下: <style type="text/css"> body { background: url("image/bg.jpg") top center no-repeat; background-size: cover; } </style> 最终效果如下图所示:

移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat

1.  效果: 浏览器: 手机模拟: 2.代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登陆</title> 6 <meta name="viewport" content="width=device-width, initial-scal