首页 > Web开发 > 详细

11种常用css样式之background学习

时间:2020-02-21 20:09:27      阅读:58      评论:0      收藏:0      [点我收藏+]

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学习

原文:https://www.cnblogs.com/dhnblog/p/12342327.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!