星生

导航

html and css(1) 

 1 body{
 2     background-image:url('11.jpg');
 3     background-color:yellow;        
 4     background-repeat:no-repeat;     
 5     background-attachment:fixed;    
 6     background-position:center;
 7     background-origin:content-box;
 8 }
 9 
10 
11 /*    
12 body{
13     background-image:url('11.jpg');  //背景图片
14     background-color:yellow;           //背景颜色
15     background-repeat:no-repeat;     //规定如何重复背景图片
16     background-attachment:fixed;     //规定背景图片是否固定或者随着页面的其余部分滚到
17     background-position:center;      //规定背景图片的位置
18     background-size:cover;           //大小
19     background-origin:content-box;         //相对于内容框来定位背景图像
20     background-clip:content-box;        //规定背景的绘制区域
21 }
22 
23 
24 position:
25 top left
26 top center
27 top right
28 center left
29 center center
30 center right
31 bottom left
32 bottom center
33 bottom right
34 
35 repeat：
36 repeat    默认。背景图像将在垂直方向和水平方向重复。
37 repeat-x    背景图像将在水平方向重复。
38 repeat-y    背景图像将在垂直方向重复。
39 no-repeat    背景图像将仅显示一次。
40 
41 origin:
42 padding-box    背景图像相对于内边距框来定位。
43 border-box    背景图像相对于边框盒来定位。
44 content-box    背景图像相对于内容框来定位。    
45 
46 clip:
47 border-box    背景被裁剪到边框盒。
48 padding-box    背景被裁剪到内边距框。
49 content-box    背景被裁剪到内容框。
50 
51 attachment:
52 scroll    默认值。背景图像会随着页面其余部分的滚动而移动。
53 fixed    当页面的其余部分滚动时，背景图像不会移动。
54 inherit    规定应该从父元素继承 background-attachment 属性的设置。
55 */

 

 1 /*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/
 2 /*transition-duration:定义过渡效果花费的时间。*/
 3 .big img{                  
 4         position:absolute;
 5         left:450px;
 6         top:50px;
 7         -ms-transform:scale(0.8);             /*IE*/
 8         -webkit-transform:scale(0.8);       /*Safari(苹果)和Chrome*/
 9         -moz-transform:scale(0.8);                /*Firefox  */
10         -o-transform:scale(0.8);                 /*Opera(欧朋)*/
11         -webkit-transition-duration: 0.5s;             /**/
12         -moz-transition-duration: 0.5s;                /**/    
13         -o-transition-duration: 0.5s;                /**/    
14         opacity: 0.6;                 /*规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。    */                
15         margin: 0 10px 5px 0;                            /**/
16 }
17 
18 .big img:hover{
19         -ms-transform:scale(1.0);         
20         -webkit-transform:scale(1.0);                     
21         -moz-transform:scale(1.0);                     
22         -o-transform:scale(1.0);                         
23         box-shadow:0px 0px 30px gray;                     /*box-shadow 属性向框添加一个或多个阴影。*/    
24         -webkit-box-shadow:0px 0px 30px gray;                 
25         -moz-box-shadow:0px 0px 30px gray;             /**/            
26         opacity: 1;                             /**/
27 }
28 
29 
30 
31 
32 
33 /*
34 :root 选择器匹配文档根元素。
35 在 HTML 中，根元素始终是 html 元素。
36 
37 :root{ 
38     background:#ff0000;
39 }
40 */
41 
42 
43 /*
44 p:before{ 
45     content:"台词：";
46     background-color:blue;
47     color:red;
48     font-weight:bold;
49 }
50 */

 

posted on 2015-01-07 19:28  Q星ZX  阅读(116)  评论(0)    收藏  举报