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

你有没有遇到过一种情况，你特别喜欢一张图片，可是可惜的是这张图片就小了那么一丁点。但有小片留白啊，那就不好看了啊。你有没有过呢，我不知道，但我真的就碰到了。我特喜欢那张图，就想让它做背景，可就小了点。于是我就想办法了。

background-size：cover；

background-size：contain。

两个看起来几乎相同，实际原理还真不一样：

cover。翻译过来就是“覆盖”，这是纯正的背景铺满了元素，它会比較图片的长和宽。哪一个比較小，它就以哪一个为基准进行扩大。图片的本身宽高比例是不变的，当增大到比較小的值铺满对应方向的屏幕了才截止；

contain：翻译过来是“包括”，这个是说整个背景都在页面内，一般图片过大了才会用。跟size同样的是，本身的宽高比是不变的。而不用的则是它取的是两者中比較大的一个，以其为基准进行缩小。小到比較大的一方进入屏幕才截止；

当然在ie下，还有这经典的滤镜，这个暂没试用。我就分享下别人写的代码吧。

filter: progid:DXImageTransform
.Microsoft.AlphaImageLoader
(src=‘.myBackground.jpg‘,
sizingMethod=‘scale‘);

这样图片仅仅要相差不是太离谱，想用哪个用哪个嘛

时间： 2024-08-07 08:22:08

背景图片铺满屏幕-------Day85的相关文章

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> 最终效果如下图所示:

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

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

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

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

css background-size与背景图片填满div

background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有三种属性,分别为 background-size: cover MDN文档解释说明:缩放背景图片以完全覆盖背景区,可能背景图片部分看不见.A keyword that is the inverse of contain. Scales the image as large as possible a

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

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

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

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

手机端背景图片撑满整个屏幕

HTML设置一个空div,用来放置背景图片. <body> <div class="main"></div> </body> (1)方法一:高度100% html,body{ margin:0; height:100%; } .main{ height:100%; background:url('./bg.png') no-repeat ; } (2)方法二:高度100vh .main{ height:100vh; width:100vw

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

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