一、背景大小

background: url("images/bg.jpg") no-repeat;
控制背景的大小
1、具体数值
background-size: 500px 500px;
2、百分比
background-size: 50% 50%;
3、cover、contain参数
  • cover 完全覆盖盒子,不一定全部显示
  • background-size: cover;
  • contain 背景图片最大化在盒子中等比显示,但不一定能铺满盒子
  • background-size: contain;

二、全屏背景自适应

 body{
background: url("images/2.jpg") no-repeat center;
/*background-size: 100% 100%;*/
background-size: cover;/*全屏背景自适应*/
}

三、背景原点

background-origin  背景原点 控制背景从什么地方开始显示

 .box{
width: 500px;
height: 500px;
border:30px solid rgba(0,255,0,0.8);
padding: 30px;
background: url(images/bg.jpg) no-repeat ;
/*背景原点 控制背景从什么地方开始显示*/
/*background-origin: padding-box;默认值*/
/*background-origin: border-box;*//*盒子最外面开始*/
background-origin: content-box;/*盒子内容区域开始*/
}

四、添加多个背景

给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开
 .box{
width: 624px;
height: 416px;
border: 1px solid #000;
margin: 100px auto;
/*给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开*/
background: url(images/bg1.png) no-repeat left top
8 ,url(images/bg2.png) no-repeat right top
9 ,url(images/bg3.png) no-repeat right bottom
10 ,url(images/bg4.png) no-repeat left bottom
11 ,url(images/bg5.png) no-repeat center;
}
												

第96天:CSS3 背景详解的更多相关文章

  1. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  2. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

  3. css3选择器详解

    css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p       选择了所有 ...

  4. CSS3 border-image详解、应用

    一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...

  5. CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  6. CSS3圆角详解

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  7. CSS3属性详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...

  8. CSS3圆角详解第一辑

    有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角.CSS3是样式表(style sheet)语言的最新版本,它的 ...

  9. CSS3圆角详解(border-radius)

    1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写 ...

随机推荐

  1. 20155317 实验二 Java面向对象程序设计

    20155317 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...

  2. 带箭头的输入框(div+CSS设置滚动条)

    div.textarea等,都可是设置有滚动条: y轴滚动条:overflow-Y:scroll x轴滚动条:overflow-X:scroll <textarea class="ms ...

  3. SublimeText 改变 tab的距离

    view -> Indentation -> Tab width ……

  4. spring_cloud多个微服务访问时偶发forward_error问题

    1.问题: 最近在做SpringBoot项目的时候,有多个分开的微服务,偶发forward error 问题 2.猜想: 个人理解为服务跳转错误,可能本身没找到目标服务,或者目标服务损坏 3.解决: ...

  5. Swift3.0字符串大小写转化

    Swift3.0语言教程字符串大小写转化,在字符串中,字符串的格式是很重要的,例如首字母大写,全部大写以及全部小写等.当字符串中字符很多时,通过人为一个一个的转换是很费时的.在NSString中提供了 ...

  6. OpenCV参考手册之Mat类详解

    OpenCV参考手册之Mat类详解(一) OpenCV参考手册之Mat类详解(二) OpenCV参考手册之Mat类详解(三)

  7. 【BZOJ4803】逆欧拉函数

    [BZOJ4803]逆欧拉函数 题面 bzoj 题解 题目是给定你\(\varphi(n)\)要求前\(k\)小的\(n\). 设\(n=\prod_{i=1}^k{p_i}^{c_i}\) 则\(\ ...

  8. Spring学习(四)-----Spring Bean引用同xml和不同xml bean的例子

    在Spring,bean可以“访问”对方通过bean配置文件指定相同或不同的引用. 1. Bean在不同的XML文件 如果是在不同XML文件中的bean,可以用一个“ref”标签,“bean”属性引用 ...

  9. oss上传文件0字节

    最近使用oss上传文件,不同项目中使用的版本也不同,之前的都能正常上传,最近因需要添加ObjectMetaData属性,扩展了一个方法,发现上传的文件始终是0字节的,最终跟源码发现conntentLe ...

  10. 原生android(二)——认识activity

    一.activity的生命周期 1.onCreate():在活动第一次被创建的时候调用,用来完成活动的初始化操作,如加载布局.绑定事件等 2.onStart():在活动由不可见变为可见时被调用 3.o ...