默认情况下，通过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. JSP编译成Servlet（五）JDT Compiler编译器

    通过JSP编译器编译后生成了对应的java文件,接下去要把Java文件编译成class文件.对于这部分完全没有必要重新造轮子,常见的优秀编译工具有Eclipse JDT Java编译器和Ant编译器. ...

  2. 详解ebs接口之客户配置文件导入（一）

    DECLARE l_rec_profile_t hz_customer_profile_v2pub.customer_profile_rec_type; l_rec_profile hz_custom ...

  3. TCP/IP滑动窗口

    T C P使用一种窗口(w i n d o w)机制来控制数据流.当一个连接建立时,连接的每一端分配一个缓冲区来保存输入的数据,并将缓冲区的尺寸发送给另一端.当数据到达时,接收方发送确认,其中包含了自 ...

  4. Android Studio 1.2.2设置显示行号

    Android Studio设置显示行号的方法与Eclipse有少许差别,直接在代码中右键,弹出右键菜单是没有显示行号功能的. 在Android Studio中设置方法有二: 1.临时显示行号 在单个 ...

  5. php 运行linux命令 与 linux下命令行执行php

    1.php运行linux命令 exec函数:string exec(string command, string [array], int [return_var]);  执行函数后不输出结果,返回最 ...

  6. AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑

    在AngularJS应用中集成微信认证授权遇到的坑 注:请点击此处进行充电! 前言 项目开发过程中,移动端新近增加了一个功能"微信授权登录",由于自己不是负责移动端开发的,但最后他 ...

  7. 新版MATERIAL DESIGN 官方动效指南（二）

    继上一篇,本文继续第二部分,从动效的速度.动态持续时间.通用持续时间和缓动曲线4个部分,教你创建平滑一致的Material Design 动效.再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡 ...

  8. Windows系统版本判定那些事儿

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  9. c/c++ 表达式求值

    表达式求值 [问题描述] 一个算术表达式是由操作数(operand).运算符(operator)和界限符(delimiter)组成的.假设操作数是正整数,运算符只含加减乘除等四种运算符,界限符有左右括 ...

  10. EBS form 之间跳转实现（form 关闭）

    实现 form CUXOMWB 使用 app_navigate.execute 打开 form CUXOEXPRAVA :然后 FROM CUXOEXPRAVA 上点击按钮 跳回from CUXOMW ...