如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 
比如一个容器(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;
}

  

css 如何让背景图片拉伸填充避免重复显示的更多相关文章

  1. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  2. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  3. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  4. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  5. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  6. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  7. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  8. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  9. 首页背景图片在PC端有显示,在手机端不显示的解决方法

    今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...

随机推荐

  1. 吴恩达机器学习笔记22-正则化逻辑回归模型(Regularized Logistic Regression)

    针对逻辑回归问题,我们在之前的课程已经学习过两种优化算法:我们首先学习了使用梯度下降法来优化代价函数

  2. python 反转一个字符串

    old_str = 'abcd' new_str1 = old_str[::-1] print(new_str1) new_str2 = ''.join(reversed(old_str)) prin ...

  3. java中调用三方接口post传参时map和jsonobject的区别转换

    post方法名及参数为:(具体方法可参考https://www.cnblogs.com/mufengforward/p/10510337.html) public static String doPo ...

  4. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  5. VMware Workstation Pro网络配置(WiFi配置等)

    常用技巧 连续按两下ctrl+alt,实现鼠标脱离 VMware Workstation Pro网络配置有几种模式: 桥接模式: 网络上的独立主机 占用路由器新IP资源 通过VMware Networ ...

  6. Tomcat添加HTTPS单向认证和双向认证

    前言 前一段时间有了解如何配置Tomcat服务为Https单向认证和双向认证,当时也做了一些记录,今天开始写博客,就把以前的记录拿出来整理下,分享给大家.本文没有介绍证书如何生成,会在下一篇博文里介绍 ...

  7. [P5172] Sum

    "类欧几里得算法"第一题 sum [题意] 给入\(n,r\),求\(\sum_{d=1}^n(-1)^{\lfloor d\sqrt r \rfloor}\). [分析] 只需要 ...

  8. npm jspdf报错

    137073 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modul ...

  9. vue 国际化i18n 多语言切换

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { ho ...

  10. stack源码

    stack概述 stack是一种先进后出的数据结构,它只有一个出口,允许新增元素.移除元素.取得最顶端元素,但每次只能处理顶端元素,也就是说,stack不允许遍历行为. stack定义 以某种既有容器 ...