• CSS学习笔记05-背景图片

    目录

    背景图片，背景平铺

    背景位置 

    背景附着 

    背景缩放

    背景简写

    多背景

    线性渐变

    背景图片，背景平铺

    背景图片：background-image : none | url (url) 

    none : 　无背景图（默认的）

    url : 　使用绝对或相对地址指定背景图像 


    背景平铺：background-repeat : repeat | no-repeat | repeat-x | repeat-y 

    repeat : 　      背景图像在纵向和横向上平铺（默认的）

    no-repeat : 　背景图像不平铺

    repeat-x : 　  背景图像在横向上平铺

    repeat-y : 　  背景图像在纵向平铺 
     

    1. <style>
    2.         body{
    3.             background-image: url(../截屏2021-04-05\ 上午10.55.13.png);
    4.             /* 背景平铺：background-repeat : repeat | no-repeat | repeat-x | repeat-y  */
    5.             background-repeat: no-repeat;
    6.         
    7.         }
    8.     style>
    9. head>
    10. <body>
    11.     
    12. body>

    背景位置 

    1. <style>
    2.         .father{
    3.             width: 900px;
    4.             height: 700px;
    5.             background-color: aquamarine;
    6.             background-image: url(../截屏2021-04-05\ 上午10.55.13.png);
    7.             background-repeat: no-repeat;
    8.  
    9.             /* background-position: center left; 方位名词 */
    10.             /* 水平方向 left center right */
    11.             /* 垂直方向 top center bottom; */
    12.             /* background-position: center left; */
    13.  
    14.             /* background-position: 10% 10%; 百分比，针对盒子本身的宽高进行计算 */
    15.             /* background-position: 10% 10%; */
    16.             
    17.             /* background-position:50px 10px; 精确方位 */
    18.             background-position:50px 10px;
    19.  
    20.             /* 注意属性值之间用空格连接，而不是逗号 */
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div class="father">
    26.  
    27.     div>

    背景附着 

    background-attachment : scroll | fixed 

    scroll : 　背景图像是随对象内容滚动
    fixed : 　背景图像固定 
    例子：

    1. <style>
    2.       body{
    3.         background-image: url(../樱花雪山.jpg);
    4.         background-repeat: no-repeat;
    5.         
    6.         /* scroll : 　背景图像是随对象内容滚动
    7.             fixed : 　背景图像固定 
    8.             默认是scroll */
    9.         background-attachment: fixed;
    10.       }
    11.     style>
    12. head>
    13.  
    14. <body>
    15.     <div>
    16.         小狗
    17.         <br> 
    18.         小狗
    19.         <br>
    20.          小狗
    21.         <br>
    22.         小狗
    23.         <br>
    24.         小狗
    25.         <br>
    26.         小狗
    27.         <br>
    28.         小狗
    29.         <br>
    30.         小狗
    31.         <br>
    32.         小狗
    33.         <br>
    34.         小狗
    35.         <br>
    36.         小狗
    37.         <br> 
    38.         小狗
    39.         <br>
    40.         小狗
    41.         <br>
    42.         小狗
    43.         <br>
    44.         小狗
    45.         <br>
    46.         小狗
    47.         <br>
    48.         小狗
    49.         <br>
    50.         小狗
    51.         <br> 
    52.         小狗
    53.         <br>
    54.          小狗
    55.         <br>
    56.         小狗
    57.         <br>
    58.         小狗
    59.         <br>
    60.         小狗
    61.         <br>
    62.         小狗
    63.         <br>
    64.         小狗
    65.         <br>
    66.         小狗
    67.         <br>
    68.         小狗
    69.         <br>
    70.         小狗
    71.         <br> 
    72.         小狗
    73.         <br>
    74.         小狗
    75.         <br>
    76.         小狗
    77.         <br>
    78.         小狗
    79.         <br>
    80.         小狗
    81.         <br>
    82.         小狗
    83.         <br>
    84.         小狗
    85.         <br> 
    86.         小狗
    87.         <br>
    88.          小狗
    89.         <br>
    90.         小狗
    91.         <br>
    92.         小狗
    93.         <br>
    94.         小狗
    95.         <br>
    96.         小狗
    97.         <br>
    98.         小狗
    99.         <br>
    100.         小狗
    101.         <br>
    102.         小狗
    103.         <br>
    104.         小狗
    105.         <br> 
    106.         小狗
    107.         <br>
    108.         小狗
    109.         <br>
    110.         小狗
    111.         <br>
    112.         小狗
    113.         <br>
    114.         小狗
    115.         <br>
    116.         小狗
    117.         <br>
    118.         小狗
    119.         <br> 
    120.         小狗
    121.         <br>
    122.          小狗
    123.         <br>
    124.         小狗
    125.         <br>
    126.         小狗
    127.         <br>
    128.         小狗
    129.         <br>
    130.         小狗
    131.         <br>
    132.         小狗
    133.         <br>
    134.         小狗
    135.         <br>
    136.         小狗
    137.         <br>
    138.         小狗
    139.         <br> 
    140.         小狗
    141.         <br>
    142.         小狗
    143.         <br>
    144.         小狗
    145.         <br>
    146.         小狗
    147.         <br>
    148.         小狗
    149.         <br>
    150.         小狗
    151.         <br>
    152.  
    153.     div>
    154.     
    155. body>

    背景缩放

    通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

    其参数设置如下：

    a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

    b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

    c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
     

    1.   <style>
    2.         .father{
    3.             width: 900px;
    4.             height: 700px;
    5.             background-color: aquamarine;
    6.             background-image: url(../截屏2021-04-05\ 上午10.55.13.png);
    7.             background-repeat: no-repeat;
    8.  
    9.             /* 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）,如果只有一个值则表示的是宽，高度自适应*/
    10.             /* background-size: 100%; */
    11.             /* background-size:500px; */
    12.  
    13.              /* contain图片显示全,不管盒子是否占满 */
    14.               background-size: contain;
    15.               /* cover盒子全都覆盖上 ,不管图片显示全不全 */
    16.               /* background-size: cover; */
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <div class="father">
    22.  
    23.     div>
    24. body>

    背景简写

    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景缩放

    1.  <style>
    2.         div{
    3.             width: 500px;
    4.             height: 500px;
    5.             /* background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景缩放 */
    6.             /* 如果给fixed 那么后面两个值会导致整个属性失效 */
    7.             background:pink url(../微信图片_20220416172523.png) no-repeat scroll 50% 0/100px;
    8.         }
    9.     style>
    10. head>
    11. <body>
    12.     <div>div>
    13. body>

    多背景

    以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

    1. <style>
    2.         body{
    3.             /* 多背景 每个背景图片之间，用，隔开 分别进行设置 */
    4.             background: url(../微信图片_20220416172523.png) no-repeat 50% 0/100px,
    5.                         url(../微信图片_20220419200310.png) no-repeat left top/100px;
    6.         }
    7.     style>
    8. head>
    9. <body>
    10.     
    11. body>

     线性渐变

    1.  <style>
    2.         body{
    3.             /* 颜色至少为两种 */
    4.             background:-webkit-linear-gradient(60deg,green,blue,pink);
    5.         }
    6.     style>
    7. head>
    8. <body>
    9.     
    10. body>

     

  • 相关阅读:
    【QT小记】QT线程同步--QWaitCondition
    【C++进阶】map和set（ 万字详解）—— 上篇
    Stable Diffusion进阶玩法说明
    Linux：信号
    NLP之实体抽取
    JavaSE面试题05：类初始化和实例初始化
    前端框架中的路由（Routing）和前端导航（Front-End Navigation）
    个人开发笔记
    前端教程-H5游戏开发
    LQ0017 排列字母【排序】
  • 原文地址：https://blog.csdn.net/qq_52117632/article/details/127411159