css 样式 图片平铺整个界面

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

  所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来

  控制背景图片的显示的。所以一般用作背景图片的有2类:

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

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

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

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

  具体使用方法如下:

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

  #background-size{

  background-size:200px 100px;

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

  #background-size2{

  background-size:30% 60%;

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

  #background-size3{

  background-size:cover;

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

  #background-size4{

  background-size:contain;

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

  #background-size5{

  background-size:auto;

  }

时间: 2024-10-10 06:40:03

css 样式 图片平铺整个界面的相关文章

css 背景图片平铺

css 背景图片平铺 background:url(../Images/VinnoImages/rightpanel.jpg);filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";-moz-background-size:100% 100%;background-size:100% 100%;

Android: 背景图片平铺要这么干

<?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="http://schemas.android.com/apk/res/android"    android:src="@drawable/bg_header"      android:tileMode="repeat" >  </bitmap>

Canvas 图片平铺设置

/** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!canvas) return; var context = canvas.getContext("2d"); var type = [ "no-repeat", // 不平铺 "repeat-x", // 横向平铺 "repeat-y"

Android 背景图片平铺

在drawable目录下创建一个repeat_bg.xml: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"     android:src="@drawable/asdfg"     android:tileMode="repeat&q

CSS背景100%平铺 浏览器缩小背景显示不全解决办法

本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大. 解决方法: width:100%;min-width:990px; 在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度. Ps: 逐风个人认为上诉的解决方案还不够人性化, 想要实现不同分辨率下灵活覆盖,逐风推荐

Duilib技巧:背景图片平铺

贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0' corner='0,0,0,0'     // mask='#FF0000' fade='255' hole='false' xtiled='false' ytiled='false' 第一种是最简单的,加载图片文件并将整张图片拉伸铺满整个控件 第二种既支持从文件中加载图片,也可以从资源中加载1

[ html drawImage createPattern ] canvas绘制图片 drawImage 属性图片平铺方式实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

Android中设定背景图片平铺。

注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很可能在不同的设备上会被拉伸,给用户的视觉体验会很差,那么如何解决这个问题呢,这里本菜鸟在此分享一下心得. 一.首先,需要在drawable-mdpi目录里定义一个xml文件,在此我命名为bitmap 编写如下代码,src中指定为你要平铺图片的名称: <?xml version="1.0&quo

[ATL/WTL]_[CBitmap复制图片-截取图片-平铺图片]

场景: 1.当你需要截取图片部分区域作为某个控件的背景. 2.需要平铺图片到一个大区域让他自动放大时. 3.或者需要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateCompatibleDC(NULL); ddc.CreateCompatibleDC(NULL); CBitmap destBmp; destBmp.CreateCompatibleBitmap(CClientDC(NULL),width,height); sdc.SelectBitmap(m_Bitma