C3的background扩展

最新推荐文章于 2022-08-10 23:31:03 发布

23号婷儿

最新推荐文章于 2022-08-10 23:31:03 发布

阅读量360

点赞数 1

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/qq_46179838/article/details/109712084

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

background

一、background-image

指定元素使用的背景图像。可以是图片路径url() 或使用 渐变linear-gradient(颜色1，颜色2) 创建

练习：两张图片放一个容器中，只需要调整一下图片的尺寸和位置即可

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-image练习</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:calc(50% - 100px);
            left:calc(50% - 100px);
            background-image:url(img/狗狗1.jpg),url(img/狗狗2.jpg);
            background-size:100px 200px;
            background-repeat:no-repeat;
            background-position:100 200, 100 200;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、background-position （指定背景图像在元素中出现的位置）

主要取值有left 、center 、right 、top 、bottom这五个，可以同时接受1~4个属性值，可以自己动手试一下

三、background-origin

指定背景图像从元素的哪个区域作为显示的原点。

1、取值:border-box 、 padding-box（默认值）、content-box

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-image练习</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:calc(50% - 100px);
            left:calc(50% - 100px);
            padding:20px;
            border:20px solid transparent;

            background-image:url(img/狗狗2.jpg);
          /*  background-origin:padding-box;*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述
此时我们看到的效果如上图，接下来我们给div添加background-origin属性，从不同的属性值表达出来的效果可以看出它起始的位置

三、background-clip（背景图片在哪一段位置开始截至，那一段以外的区域就都不显示背景图片）

1、取值

border-box 从border区域（含border）开始显示背景图像。
padding-box 从padding区域（含padding）开始显示背景图像。
content-box 从content区域开始显示背景图像。
text

首先我们先稍微复习一下盒模型的概念,了解一下每个区域的位置分别在哪，等下通过练习就可以明白每个取值的区别了

四、background-repeat

指定背景图像如何填充。

四个取值
repeat-x：
repeat-y
repeat
no-repeat（背景图像不平铺）
round（当背景图像不能以整数次平铺时，会根据情况缩放图像。）
space（当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。）

拓展

可以同时设置两个值，但是需要注意方向
设置repeat-x和repeat-y时要特别注意，因为它们的设置相当于默认是有两个属性值，repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat

五、background-attachment（定义滚动时背景图像相对于谁固定）

取值
scroll(默认值)
背景图像相对于容器进行定位，也就是说当一个容器里面的内容无论怎么滚动背景图像也不会跟着滚动。通俗的说就是相对于你在页面设置的某个容器进行定位
local
背景图像相对于容器的内容进行定位，也就是说当容器里面的内容滚动时背景图片也会跟着滚动，因为背景图像总是要跟着内容一起的。
fixed
背景图像相对于视口（viewport）进行定位。

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-attachment练习</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }

        div{
            width:500px;
            height:600px;
            border: 1px solid red;
            overflow:scroll;
            background-image:url(img/狗狗1.jpg);
            background-repeat:no-repeat ;
            background-size:300px 300px;
            background-position: 100px 100px;
            background-attachment:scroll; //具体每个值的效果可以把代码复制下来试一下就明白了

        }
    </style>
</head>
<body>
    <div>
        　//此处内容自己寻找，也可以用vs code快捷生成（lorem*100生成出来）
        　　11月17日，市十四届人大常委会第三十三次会议听取市人民政府关于市十四届人大五次会议以来人大代表建议办理情况的报告。报告显示，2020年，市人民政府共收到市人大代表建议429件，其中422件代表建议办理完毕，7件近期交办的建议正在办理中，代表建议办理工作取得明显成效，解决了一批群众关心、社会关注的热点难点问题。提升城市品质：新建绿道72公里新增停车泊位17.8万个

        　//此处省略100个<br>标签
        　<br>
   
    </div>
</body>
</html>

这是设置了默认值的效果图
在这里插入图片描述

六、background-size（指定背景图像尺寸）

取值：
<length>：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

cover和contain都是在不改变原有图片的尺寸下，用一张图片来填充背景

cover在不改变原有图片的尺寸下，用一张完成的图片进行填充，会存在溢出的风险
contain让容器包含一张完整的图片，会存在repeat的风险

下面练习可以明显看出出两者的差异

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-attachment练习</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }

        div{
            width:500px;
            height:600px;
            position:absolute;
            border: 1px solid red;
            overflow:scroll;
            background-image:url(img/狗狗1.jpg);
            background-repeat:no-repeat ;
            background-size:contain;

        }
    </style>
</head>
<body>
    <div>
        
        　11月17日，市十四届人大常委会第三十三次会议听取市人民政府关于市十四届人大五次会议以来人大代表建议办理情况的报告。报告显示，2020年，市人民政府共收到市人大代表建议429件，其中422件代表建议办理完毕，7件近期交办的建议正在办理中，代表建议办理工作取得明显成效，解决了一批群众关心、社会关注的热点难点问题。

　　提升城市品质：新建绿道72公里新增停车泊位17.8万个

　　在提升城市功能品质方面，市人民政府围绕胡先进等代表提出的《关于完善阳逻国际港功能，为武汉航运中心建设提供核心支撑的建议》、刘建民代表提出的《关于提高我市城市生活垃圾治理水平的建议》等169件建议的办理，提升生态环境质量，建设城市亮点片区，完善基础设施体系，加强城市精细化管理。

　　今年，我市建成各类公园38个、绿地577万平方米、林荫道116公里、绿道72公里，植树造林2.33万亩;江汉路步行街正式开街，汉正街成功申报省级试点步行街，楚河汉街、光谷步行街比照省级步行街标准推进自主提升，两江四岸江滩防洪及环境综合整治工程提档升级，提升两江四岸核心区暗区建筑亮化设施，丰富完善了长江灯光秀整体效果;新增停车泊位17.8万个，新建充电桩5.2万个;启动171个老旧小区立面整治工作。完成143个商圈户外广告、110条路段门面招牌规范提质;新增24条(段)停车秩序示范路，总数达到50条、200公里。

　　全面深化改革：政务服务跑动次数减少了79.6%

　　在全面深化改革开放方面，市人民政府围绕黄迈瑜代表提出的《关于推进民呼我应，部门执法力量下沉的建议》、晏冠亮代表提出的《关于在综保区内大力发展跨境电商的建议》等43件建议的办理，优化营商环境，增强市场主体竞争力，推动高水平对外开放。

　　我市全面推进“五减五通”，深化“四办”改革，政务服务事项平均申请材料、办理时限、跑动次数、办理环节分别压减25.6%、28.5%、79.6%、29.5%;深化政府采购改革，1-9月，中小微企业获得全市政府采购合同份额占比达87.7%;全力推进企业纾困，累计筹集1000亿元纾困专项资金，累计减税降费461.1亿元;新开通法兰克福、洛杉矶等6条国际货运航线，引导航空公司执飞“客改货”国际货运航班600余班;跨境电商进出口16.19亿元，同比增长134%。

　　保障改善民生：企业退休人员基本养老金人均月增168元

　　在保障和改善民生方面，围绕刘国俊代表提出的《力促文化兴城，提升大武汉城市软实力与竞争力》、彭正等代表提出的《关于推进全市义务教育优质均衡发展的建议》等115件建议的办理，多管齐下稳定和扩大就业，切实加强社会保障，着力解决“一老一小”问题，扩大优质公共服务供给，加强和创新社会治理。

　　今年截至10月31日，我市新增城镇就业18.69万人，高校毕业生留汉就业创业22.80万人，扶持创业2.97万人，新增农村劳动力转移就业2.08万人，帮扶困难人员就业2.44万人;社会保险扩面新增65.79万人次;企业退休人员基本养老金人均月增加168元，城乡低保标准分别提高至每人每月830元、680元，特困人员供养标准分别提高至每人每月1660元、1280元;新改扩建公益普惠性幼儿园项目27个;完成318家农贸市场(菜市场)标准化改造;开展565个老旧小区安防设施改造。
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit itaque quod quae! Eum quis, fuga consequuntur ullam vero quaerat nobis saepe aut quo. Architecto magnam ut molestias quod blanditiis fugiat cum, sit vero maiores iste accusamus dolores facere sed earum praesentium reprehenderit maxime eius expedita! Recusandae iusto mollitia ipsa cupiditate? Dolorem, id velit? Delectus incidunt, atque reprehenderit neque consequuntur non voluptas. Nulla cumque unde repudiandae velit adipisci sunt pariatur atque inventore odit, suscipit eos tenetur maiores! Accusantium, omnis officiis pariatur fuga recusandae eum dolorum doloribus, consectetur hic reiciendis dignissimos corporis. Earum quisquam vero quae perspiciatis deleniti quidem quod tenetur aperiam tempora quaerat? Tenetur numquam nihil odit ea architecto iure accusantium asperiores tempora alias maiores eos quaerat totam, optio fuga, perspiciatis iste dolores aliquid sint. Est autem aliquid recusandae alias quibusdam sed provident nostrum fugit impedit sequi. Tempora dolorem, sunt harum est sit repudiandae itaque ea ratione quaerat quidem asperiores vel debitis aliquid non odio voluptates! Ducimus et dolor delectus maiores ipsa tempore illum odio aliquam vero placeat, dolorem aspernatur sed dicta sint reprehenderit corrupti similique ipsam minus laborum, at autem quisquam quam! Hic fugit necessitatibus facilis expedita soluta dolores aut magnam. A odit nulla possimus. Dignissimos voluptatem laborum quas sed aliquam repellendus quos aut, quasi veniam! Aperiam nam voluptatibus quas facilis accusantium blanditiis ipsa aut fuga quaerat provident illum quibusdam fugit, unde dolores vero, dolorem facere! Ullam cum alias, inventore architecto obcaecati, a minus quis dolores nostrum qui nobis ipsa reprehenderit exercitationem impedit doloremque fugit vitae, ab dicta quibusdam quia totam odio. Reiciendis accusamus deleniti dicta quas ipsam libero tenetur sequi doloremque non odio quam illo, veritatis placeat quidem soluta, iusto velit perferendis? Eos distinctio ipsa atque architecto vel, maiores id voluptates aut iusto dignissimos laborum ea debitis 
    </div>
    
</body>
</html>