开发者学堂课程【HTML5 新特性学习:CSS3背景】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/396/detail/5054
CSS3背景
CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。
属性:
background-size
background-origin
浏览器支持:
Internet Explorer 9+、Firefox、 Chrome、 Safari 以及 Opera 支持新的背景属性。
1、缩小图片
bodyl
background: url ("images/bg_ flower_ small.gif");
backg round-size: 50px 80px;
-moz-backg round- -size: 50px 80px;
backg round- repeat: no- repeat;
padding-top: 100px;]
]
</style>
</head>
<body>
<p>_上面时缩小的图片</p>
<p> äH:<img src=" images/bg_ flower_ small.gif" alt="t"></p>
2、位置变换
<style>
div{
border: 1px solid cadetblue;
padding: 35px;
background- image: url(images/bg_ _flower_ small.gif); backg round- repeat: no- repeat ;
background-position: Left;
#div1(
backg round-origin: bo rder-box;]
#div2f
backg round-origin: content- box;
</styLe>
: </head>
<body>
<p>border-box</p>
<div id="div1">
尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂
</div>
<p>content-box</p>
<div id="div2">
尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂
</div>
) </body>
3、多重背景的添加
<style>
body(
background- -image: url (" images/11.gif") , url("images/bg_ _flower_ small.gif");