html and css(1)

body{
    background-image:url('11.jpg');
    background-color:yellow;        
    background-repeat:no-repeat;     
    background-attachment:fixed;    
    background-position:center;
    background-origin:content-box;
}


/*    
body{
    background-image:url('11.jpg');  //背景图片
    background-color:yellow;           //背景颜色
    background-repeat:no-repeat;     //规定如何重复背景图片
    background-attachment:fixed;     //规定背景图片是否固定或者随着页面的其余部分滚到
    background-position:center;      //规定背景图片的位置
    background-size:cover;           //大小
    background-origin:content-box;         //相对于内容框来定位背景图像
    background-clip:content-box;        //规定背景的绘制区域
}


position:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

repeat：
repeat    默认。背景图像将在垂直方向和水平方向重复。
repeat-x    背景图像将在水平方向重复。
repeat-y    背景图像将在垂直方向重复。
no-repeat    背景图像将仅显示一次。

origin:
padding-box    背景图像相对于内边距框来定位。
border-box    背景图像相对于边框盒来定位。
content-box    背景图像相对于内容框来定位。    

clip:
border-box    背景被裁剪到边框盒。
padding-box    背景被裁剪到内边距框。
content-box    背景被裁剪到内容框。

attachment:
scroll    默认值。背景图像会随着页面其余部分的滚动而移动。
fixed    当页面的其余部分滚动时，背景图像不会移动。
inherit    规定应该从父元素继承 background-attachment 属性的设置。
*/

/*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/
/*transition-duration:定义过渡效果花费的时间。*/
.big img{                  
        position:absolute;
        left:450px;
        top:50px;
        -ms-transform:scale(0.8);             /*IE*/
        -webkit-transform:scale(0.8);       /*Safari(苹果)和Chrome*/
        -moz-transform:scale(0.8);                /*Firefox  */
        -o-transform:scale(0.8);                 /*Opera(欧朋)*/
        -webkit-transition-duration: 0.5s;             /**/
        -moz-transition-duration: 0.5s;                /**/    
        -o-transition-duration: 0.5s;                /**/    
        opacity: 0.6;                 /*规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。    */                
        margin: 0 10px 5px 0;                            /**/
}

.big img:hover{
        -ms-transform:scale(1.0);         
        -webkit-transform:scale(1.0);                     
        -moz-transform:scale(1.0);                     
        -o-transform:scale(1.0);                         
        box-shadow:0px 0px 30px gray;                     /*box-shadow 属性向框添加一个或多个阴影。*/    
        -webkit-box-shadow:0px 0px 30px gray;                 
        -moz-box-shadow:0px 0px 30px gray;             /**/            
        opacity: 1;                             /**/
}





/*
:root 选择器匹配文档根元素。
在 HTML 中，根元素始终是 html 元素。

:root{ 
    background:#ff0000;
}
*/


/*
p:before{ 
    content:"台词：";
    background-color:blue;
    color:red;
    font-weight:bold;
}
*/