1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div>中国</div> 10 <div id="div2"></div> 11 <img src="img/草5.jpg"> 12 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 13 让屏幕超过一屏产生滚动条。 14 </body> 15 </html>
1 div{ 2 width: 100px; 3 height: 100px; 4 /*background: red url(img/鱼2.jpg) repeat-x;*/ 5 /*background-color: green;*/ 6 background-image: url(img/鱼2.jpg); 7 background-repeat: ;/*设置图片如何重复：默认repeat，可设no-repeat，repeat-x，repeat-y，round*/ 8 background-position: ;/*此属性要求background-repeat设置成no-repeat才有效。默认左上，left、rigth、center、bottom、top两两组合使用，若只有一个则第二个值默认为center。x%y%水平垂直位置，0%0%左上，100%100%右下，若只有一个百分值，则另一个默认50%。xy，单位像素或em，0px0px左上，只有一个值只第二个值为50%*/ 9 } 10 body{ 11 /*background: url(img/草3.jpg) no-repeat;*/ 12 /*background-attachment: fixed;*//*默认scroll随屏幕一起滚动，可设fixed*/ 13 background-size: /*500px*//*50%*//*cover*/contain;/*若只设置一个则为宽，高会根据原图比例调整。百分比为背景区别的百分比，非原图的比例缩放。cover保证原图宽高比横竖方向扩充整个背景可能会有某个方向超出区域被切掉；contain保证原图比例，使横竖其中一个扩充到就完成。*/ 14 } 15 #div2{ 16 width: /*300px*/150px; 17 height: /*200px*/100px; 18 background: rgba(255,125,0,0.3); 19 margin: 50px; 20 padding: 60px; 21 border: 20px groove rgba(100,30,15,0.5); 22 background: url(img/草5.jpg) no-repeat; 23 /*background-origin: content-box;*//*border-box左上角对齐到外边框；默认值padding-box左上角对齐到内边框；content-box左上角对齐到内容边框*/ 24 background-origin: border-box; 25 background-clip: content-box;/*默认border-box从外边框开始剪切，外边框内都被保留。一般配合background-origin: border-box容易看出效果，从哪里显示，从哪里裁剪。padding-box从内边框开始裁剪。content-box从内容边框开始裁剪。*/ 26 }