css3基础
Posted sunnyboysix
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3基础相关的知识，希望对你有一定的参考价值。
css3背景
1 background-color 背景颜色
2 background-image 背景图片
3 background-repeat 背景展示方式
repeat repeat-x repeat-y no-repeat(用的最多)
4 background-attachment 背景图片是固定还是滚动 tips用的不多
scroll 默认值 背景图片随着浏览器滚动条一起滚动
fixed 背景图片固定不动
5 background-position 背景图片的位置 一般不用
ep:
<style>
info-one{
width: 300px;
height: 300px;
background-color: red;/*背景颜色*/
float: left;/*为了在一排展示左浮动*/
}
.info-two{
width: 300px;
height: 300px;
background-image: url(images/bg-img-02.jpg);
/*url引入图片,background: url(images/bg-img-02.jpg);这样也可以*/
background-size: 100% 100%;/*之前介绍过让背景充满整个DIV*/
float: left;/*为了在一排展示左浮动*/
}
.info-three{
width: 300px;
height: 300px;
background-image: url(images/bg-img-02.jpg);
background-size: 50% 50%;
float: left;
border: 1px solid red;
}
</style>
<body>
<div class="info-one">
</div>
<div class="info-two">
</div>
<div class="info-three">
</div>
</body>
css3新增背景属性
background-origin:指定绘制背景图片的起点
三个属性值(用的不多)
padding-box border的内边缘显示图片
border-box border的外边缘显示图片
content-box border的内边缘显示图片
background-clip与background-origin类似用的不多
padding-box border-box content-box三个属性值
background-size指定背景图片的大小
属性值
auto 保持原来的图片大小相当于没有添加这个属性
%取值 上面有介绍 (用的很多，通常是100%,100%)
cover 整个图片布满div 要配合background-position:center实现满屏效果
contain 保持图片的宽高比例缩放到背景区域 (用的很多)
以上是关于css3基础的主要内容，如果未能解决你的问题，请参考以下文章