默认情况下，通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后，图片会自动横向和纵向平铺。这就会产生一些美观上的问题。 XP人提供CSS代码如下，放在页面头部即可，仅供参考： <style type="text/css"> body { background:url(/img/background.png); background-repeat: repeat-x; background-positon: 100%,100%;} < /style>

续: 有几位朋友说我的这篇文章实在没能解决他们的问题，他们希望的是不考虑自己背景图片的大小，不管多大的屏幕，自己的背景图片自动上下拉伸自己，适应屏幕大小，铺满整个屏幕。所以，我今天再把下面的代码和大家分享。要想实现这样的效果，可以考虑使用滤镜。 <style type="text/css"> body{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/skin/v2011/images/body.png',sizingMethod='scale'); background-repeat: no-repeat; background-positon: 100%, 100%; } < /style>

如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）的更多相关文章

  1. css如何将图片横向平铺？

    在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...

  2. Android 背景图片重复平铺

    有时候我们需要将一个图片横向或者纵向的平铺(重复循环),这个时候我们需要创建一个xml文件,如下: <?xml version ="1.0" encoding =" ...

  3. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  4. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  5. CSS实现背景图片屏幕自适应

    在做登陆页面等的首页的时候,经常会遇到需要放一张背景大图的情况,并且需要图片按比例缩放,来适应不同屏幕的大小. html代码如下: <!DOCTYPE html> <html lan ...

  6. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  7. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  8. CSS中背景图片的background-position中的left top到底是相对于谁的？

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  9. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

随机推荐

  1. Python学习笔记 - 数据类型和变量

    Python中有整数和浮点数,表示方法和C语言一样 浮点数也很像,不过Python可以用单引号把字符串括起来 字符串是以单引号'或双引号"括起来的任意文本,比如'abc',"xyz ...

  2. 如何运行 rpcz python example

    试着运行 rpcz-python 的 example.过程记录如下.假设protobuf-py已经按照protobuf的安装说明安装了.发现 protobuf-2.5.0版的python包是pytho ...

  3. 纯命令提交代码到git仓库（教你怎么装逼）

    如果不喜欢用命令的请点链接:http://blog.csdn.net/xiangzhihong8/article/details/50715427 我这里用纯命令,主要是因为这两天不知道什么原因,ba ...

  4. android图片加载库Glide

    什么是Glide? Glide是一个加载图片的库,作者是bumptech,它是在泰国举行的google 开发者论坛上google为我们介绍的,这个库被广泛的运用在google的开源项目中. Glide ...

  5. UML之状态图

    状态图,英文名曰-Statechart Diagram,她是系统的动态方面建模的五种图之一,一个状态图显示了一个状态机,在为对象的生命期建模中,她发挥着重要的作用,展示了单个对象内从状态到状态的控制流 ...

  6. OS X升级到10.11后Xcode6.4界面无iOS device选择栏的解决办法

    原来在Xcode6.4项目运行按钮右侧会有一个可以选择设备或模拟器的选择栏,但是升级后没有了.但是Xcode7.0.1打开同样的项目会有显示. 简单找了一下无果后,发现咋Xcode顶部菜单里可以找到切 ...

  7. FFMPEG类库打开流媒体的方法（需要传参数的时候）

    使用ffmpeg类库进行开发的时候,打开流媒体(或本地文件)的函数是avformat_open_input(). 其中打开网络流的话,前面要加上函数avformat_network_init(). 一 ...

  8. linux设置系统时间

    设置系统时间 -         date命令:显示系统的时间,可以在直接输入"date"命令来查看系统的时间 -           date+%y/%m/%d -        ...

  9. Developing User Interfaces

      Developing a User Interface with ADF Faces Purpose This tutorial covers developing the user interf ...

  10. CentOS 7下编译安装Boost_1_57_0

    之前对库的理解太肤浅(现在也仍很肤浅),导致走了挺多的弯路,现记录以备后查. 现在可以从Boost官网下载到最新的Boost源代码boost_1_57_0.tar.gz. 现将步骤记录如下: 1. 解 ...