11种常用css样式之background学习

background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的background样式如下,1.background-color2.background-image3.background-repeat4.background-attachment5.background-position,废话不多扯,直接代码页面展示:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>11种常用css样式之背景样式学习</title>
 7     <style type="text/css">
 8     *{
 9         margin: 0;
10         padding: 0;
11         font: 14px/1.5em "Microsoft YaHei";
12         color: #fff;
13     }
14     body{
15         background-image:url(images/xs.png);/*背景图像*/
16         background-repeat: no-repeat;/*不重复*/
17         background-color: #ccc;
18         background-position:left center;
19         /* background-position: 50% 50%; */
20         /*background-position: 10px 10px;*/
21         /* 以窗口左上角为坐标系(0,0)定xy轴,朝right正,朝bottom为正 */
22         /* background简写 */
23         background: #f33 url(images/xs.png) no-repeat right center;
24         background-attachment: fixed;/*固定定位*/ 
25     }
26     div.box{
27         background-color:#f90;/*背景颜色*/
28     }
29     </style>
30 </head>
31 <body>
32     <div class="box">
33         你的压力来源于:无法自律,只是假装很努力;现状跟不上内心的欲望;所以你焦虑又恐慌&nbsp;&nbsp;Your stress comes from: unable to discipline yourself, but pretending to work hard;
34     </div>
35     <!-- <p>你的压力来源于:无法自律,只是假装很努力;现状跟不上内心的欲望;所以你焦虑又恐慌&nbsp;&nbsp;Your stress comes from: unable to discipline yourself, but pretending to work hard;</p>*50 回车50 -->
36 </body>
37 </html>

11种常用css样式之background学习

全文结束