第96天:CSS3 背景详解
一、背景大小
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 背景详解的更多相关文章
- 转:【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
- css3选择器详解
css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p 选择了所有 ...
- CSS3 border-image详解、应用
一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...
- CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...
- CSS3圆角详解
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
- CSS3属性详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...
- CSS3圆角详解第一辑
有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角.CSS3是样式表(style sheet)语言的最新版本,它的 ...
- CSS3圆角详解(border-radius)
1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写 ...
随机推荐
- 20155317 实验二 Java面向对象程序设计
20155317 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...
- 带箭头的输入框(div+CSS设置滚动条)
div.textarea等,都可是设置有滚动条: y轴滚动条:overflow-Y:scroll x轴滚动条:overflow-X:scroll <textarea class="ms ...
- SublimeText 改变 tab的距离
view -> Indentation -> Tab width ……
- spring_cloud多个微服务访问时偶发forward_error问题
1.问题: 最近在做SpringBoot项目的时候,有多个分开的微服务,偶发forward error 问题 2.猜想: 个人理解为服务跳转错误,可能本身没找到目标服务,或者目标服务损坏 3.解决: ...
- Swift3.0字符串大小写转化
Swift3.0语言教程字符串大小写转化,在字符串中,字符串的格式是很重要的,例如首字母大写,全部大写以及全部小写等.当字符串中字符很多时,通过人为一个一个的转换是很费时的.在NSString中提供了 ...
- OpenCV参考手册之Mat类详解
OpenCV参考手册之Mat类详解(一) OpenCV参考手册之Mat类详解(二) OpenCV参考手册之Mat类详解(三)
- 【BZOJ4803】逆欧拉函数
[BZOJ4803]逆欧拉函数 题面 bzoj 题解 题目是给定你\(\varphi(n)\)要求前\(k\)小的\(n\). 设\(n=\prod_{i=1}^k{p_i}^{c_i}\) 则\(\ ...
- Spring学习(四)-----Spring Bean引用同xml和不同xml bean的例子
在Spring,bean可以“访问”对方通过bean配置文件指定相同或不同的引用. 1. Bean在不同的XML文件 如果是在不同XML文件中的bean,可以用一个“ref”标签,“bean”属性引用 ...
- oss上传文件0字节
最近使用oss上传文件,不同项目中使用的版本也不同,之前的都能正常上传,最近因需要添加ObjectMetaData属性,扩展了一个方法,发现上传的文件始终是0字节的,最终跟源码发现conntentLe ...
- 原生android(二)——认识activity
一.activity的生命周期 1.onCreate():在活动第一次被创建的时候调用,用来完成活动的初始化操作,如加载布局.绑定事件等 2.onStart():在活动由不可见变为可见时被调用 3.o ...