• 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>
  • 相关阅读:
    win10 ubuntu 双系统启动顺序设置
    关于memset的使用
    POJ 2533 最小上升子序列
    Did Pong Lie? (差分系统 判负环)
    HDU 5828 Rikka with Sequence(线段树 开根号)
    SCU
    北邮校赛 I. Beautiful Array(DP)
    北邮校赛 H. Black-white Tree (猜的)
    北邮校赛 F. Gabriel's Pocket Money(树状数组)
    HDU 5862 Counting Intersections(离散化 + 树状数组)
  • 原文地址:https://www.cnblogs.com/webaction/p/12342327.html
Copyright © 2020-2023  润新知