首页 > > 网页制作 > css >

11种常用css样式之background学习

2020-02-21 16:03:59来源：博客园阅读 ()

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>