`
zhangyaochun
  • 浏览: 2614742 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3之background-size

    博客分类:
  • css3
阅读更多

CSS3之background-size

 

---------设置背景图片的大小

 

background-size的取值

 

  • auto               --------默认值,保持背景图片的原始高度和宽度
  • <length>        --------设置具体的值,可以改变背景图片的大小。
  • <percentage>--------0%~100%之间的任何值,只能应用在块级元素上
  • cover              --------将图片放大,适合铺满整个容器
  • contain           --------将图片缩小,以适合铺满整个容器
 

兼容的浏览器

 

http://caniuse.com/#search=background-size




 

 

 

兼容性写法

 

  • Mozilla:-moz-background-size
  • Webkit:-webkit-background-size
  • Presto:-o-background-size

 

 

 

  • 大小: 30.7 KB
  • 大小: 64.7 KB
1
0
分享到:
评论

相关推荐

    CSS3的Background-size很重要

    CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术,使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。...

    CSS3的background-size属性,实现响应式式图片等比例缩放。

    CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一,它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小,而不仅仅是局限于图片...

    解决XP IE8不支持css3的background-size问题实例

    这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的,而`background-size`属性则是CSS3中用于控制背景图片尺寸的一个强大工具。 首先,我们需要理解`background-size`属性的作用。它允许开发者独立于元素本身的...

    前端开源库-css-background-video

    3. **CSS3 Background Properties** 在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background...

    CSS3之背景尺寸Background-size使用介绍

    CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。 一、...

    CSS3属性background-size使用指南

    CSS3属性`background-size`是CSS中的一个非常实用的属性,它主要用来设置背景图片的尺寸。在网页设计中,合理使用此属性能够使网页背景图片更具表现力和适应性。下面将详细介绍该属性的用法和特性。 首先,`...

    css中background-size属性使用介绍

    background-size的值类型:1个或2个值,这些值既可以是像素px,也可以是百分比%或auto,还可以是特定值cover, contain。 background-size可以设置2个值,1个为必填,1个为可选。 其中第1个值用于指定背景图的width...

    css3中背景尺寸background-size详解

    定义:规定背景图像的尺寸 background-size的类型 background-size需要两个值,它的类型可以是像素(px)、百分比(%)或是...JavaScript语法:object.style.backgroundSize=60px 80px 语法: background-size: &lt;

    CSS中背景图片定位方法:background-position的用法

    3. 像素值:例如`background-position: 10px 20px;`,指定图片左上角距离元素左边界10px,上边界20px。 `background-position`的坐标系统基于元素的左上角为原点(0, 0)。水平方向上,向右为正,向左为负;垂直方向...

    background-position 的学习.zip

    `background-position`还支持CSS3的渐变背景。在这种情况下,`background-position`决定了渐变线的方向。例如,水平渐变可以写为: ```css background-image: linear-gradient(to right, red, blue); background-...

    css背景图片自适应-html-adaptive-navigation-bar-master.zip

    开发者可能还使用了其他CSS3特性,如伪类(`:hover`, `:active`, `:focus`)来增强用户体验,或者使用`transition`和`animation`来添加动态效果。 总之,背景图片的自适应是CSS中一个实用且重要的特性,它有助于...

    background-size使用详解

    在CSS中,我们可以使用background-size属性来控制背景图片的大小和拉伸方式,以适应网页布局的需要。background-size属性提供了多种设置方式,包括具体的长度值、百分比、以及两个特定的关键字:cover和contain。...

    一个PostCSS插件,用于自动为`background-image`添加CSS规则`width`和`height`。-JavaScript开发

    postcss-background-image-auto-size一个PostCSS插件,可自动为背景图像添加CSS规则的宽度和高度。 入门安装$ yarn add postcss-background-image-auto-size --dev postcss-background-image-auto-size一个PostCSS...

    backgroundsize.htc

    `backgroundsize.htc`是一个行为(Behavior)文件,它是微软Internet Explorer浏览器特有的一个技术,通过使用`behavior`属性来引入这个`.htc`文件,可以模拟实现一些非IE原生支持的CSS3特性,比如`background-size`...

    CSS3实现图片全屏背景特效

    首先,我们需要了解CSS3中的背景属性,例如`background-image`、`background-size`、`background-position`和`background-repeat`等。这些属性可以帮助我们设置和调整背景图片。 1. `background-image`: 用于指定...

    CSS应用实例--固定不动背景.rar

    当`background-attachment`值为`fixed`时,背景图像将相对于视口固定,即使页面内容滚动,背景也不会随之移动。 例如,以下是一个简单的CSS代码片段,展示了如何设置固定背景: ```css body { background-image: ...

    CSS-背景图定位

    此外,CSS3引入了`background-origin`和`background-clip`属性,它们可以控制背景图像的绘制区域。`background-origin`可设置为`padding-box`(默认,从内边距框开始),`border-box`(从边框盒开始)或`content-box...

Global site tag (gtag.js) - Google Analytics