非零基础自学前端最后一遍一 HTML+CSS 11 CSS设置背景 11.3 设置附加-attachment缩写属性

我不是女神ヾ 2024-03-26 21:52 21阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  11 CSS设置背景
         *   *  11.3 设置附加-attachment缩写属性
             *   *  11.3.1 background-attachment
                 *  11.3.2 background

![在这里插入图片描述][c636a9c08500486e8e73e390a57d7126.png_pic_center]

#### 一 HTML+CSS ####

#### 11 CSS设置背景 ####

##### 11.3 设置附加-attachment缩写属性 #####

###### 11.3.1 background-attachment ######

*  background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
 *  可以设置以下3个值
    
     *  scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
        
        ![在这里插入图片描述][e0997507269949e2a75212de76c12e00.png_pic_center]
     *  local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
        
        ![在这里插入图片描述][e77c941f8b6a497d9cb21ed2911bf0af.png_pic_center]
     *  fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
        
        ![在这里插入图片描述][df74ebd27d1948d5901234f418568cd7.png_pic_center]

<!DOCTYPE html>
 <html lang="en">
 
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .box {
 
 width: 300px;
 height: 300px;
 overflow: scroll;
 color: #fff;
 background-color: #f00;
 
 background-image: url(../images/kobe01.jpg);
 
 /* 附加效果 */
 /* background-attachment: scroll; */
 /* background-attachment: local; */
 /* background-attachment: fixed; */
 }
 </style>
 </head>
 
 <body>
 
 <div class="box">
 赏花游人群中，朋友相约出游、全家出游、亲子出游占比较高。同程旅行大数据显示，赏花游对男性和女性游客同样具有吸引力。在关注赏花游的人群中，男性占比为48%，女性占比为52%，几乎持平。在年龄分布上，80后和90后更爱赏花游，00后赏花游客群体增长迅速，占比从去年的5%增至今年的16%。和朋友一起相约赏花，在赏花人群中占比最高，达到36%，带着家人孩子一起外出赏花的游客占比也达到33%。
 3月上旬，多地出现散发疫情，赏花长线游市场受到较大影响。
 “近两年以来，春季赏花游市场中，周边短途游占比进一步提高，从今年途牛旅游网预订情况看，超七成游客选择周末周边游。疫情发生前，每年春季，江西婺源、西藏林芝等地跟团游中，外省游客占比较大，今年，在跨省游受限的情况下，赏花长线游产品受影响较大。”途牛旅游相关负责人告诉记者。
 
 驴妈妈旅游网首席执行官邹庆龄说：“今年赏花游目的地更偏向省内、当地，其次是周边省市。从玩法上来看，赏花游产品呈现高频化、深度打卡、网红内容体验等特点；行程设计由单纯的赏花到品农家菜、入住当地酒店及特色民宿，赏花游呈现慢节奏体验的趋势。”
 </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 </body>
 
 </html>

渲染效果

![在这里插入图片描述][0f865981862a42b782747ba56adc1627.png_pic_center]

###### 11.3.2 background ######

*  background是一系列背景相关属性的简写属性
 *  常用格式是
    
    ![在这里插入图片描述][9cab857b701a4807a3d5563dca9219db.png_pic_center]
 *  background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
 *  其他属性也都可以省略，而且顺序任意

[c636a9c08500486e8e73e390a57d7126.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/896021d750074a9f906f2200c15c71df.png
[e0997507269949e2a75212de76c12e00.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b153b28ae51741aca4897a5998167bce.png
[e77c941f8b6a497d9cb21ed2911bf0af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4fce42fc93384036973d88e18a40da08.png
[df74ebd27d1948d5901234f418568cd7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/327ae4dfadf64e109b15b28be9580874.png
[0f865981862a42b782747ba56adc1627.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c25c07d517e94d6690046510936a8c7c.png
[9cab857b701a4807a3d5563dca9219db.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5d1a0b586d784f62afb6d5d415a70a73.png