• CSS3 background-clip背景裁剪、CSS3 background-origin背景图片起点

    background-clip属性指定背景绘制区域。指定显示背景的范围。

    设置裁剪区域后，只有落到裁剪区域内的内容会被显示，而落到裁剪区域外的内容不会被显示出来。

    background-clip属性 可以 同时控制 背景图像和背景色 的显示范围。

    （1）背景图像的显示范围。

    （2）背景色的显示范围。

    语法：

    background-clip: border-box|padding-box|content-box;

    body样式

    1. <body>
    2.         <div class="box border-box">
    3.             <h1>环球网评:“五个一百”，涵养向上向善的精神力量h1>
    4.             <p>近日，中国正能量“五个一百”网络精品征集评选展播活动进入公示阶段。经过前期初评、复评、网络投票展播和终评，共评出拟入选网络正能量精品500个和备选网络正能量精品50个。评选活动自2021年6月25日启动以来，总体征集数量超过12.5万余个，围绕时代主题，以先进典型为引领，以精品力作为载体，传播正能量，让公众享受优质的“精神食粮”。p>
    5.         div>
    6.      
    7.         <div class="box padding-box">
    8.             <h1>环球网评:“五个一百”，涵养向上向善的精神力量h1>
    9.             <p>近日，中国正能量“五个一百”网络精品征集评选展播活动进入公示阶段。经过前期初评、复评、网络投票展播和终评，共评出拟入选网络正能量精品500个和备选网络正能量精品50个。评选活动自2021年6月25日启动以来，总体征集数量超过12.5万余个，围绕时代主题，以先进典型为引领，以精品力作为载体，传播正能量，让公众享受优质的“精神食粮”。p>
    10.         div>
    11.     
    12.         <div class="box content-box">
    13.             <h1>环球网评:“五个一百”，涵养向上向善的精神力量h1>
    14.             <p>近日，中国正能量“五个一百”网络精品征集评选展播活动进入公示阶段。经过前期初评、复评、网络投票展播和终评，共评出拟入选网络正能量精品500个和备选网络正能量精品50个。评选活动自2021年6月25日启动以来，总体征集数量超过12.5万余个，围绕时代主题，以先进典型为引领，以精品力作为载体，传播正能量，让公众享受优质的“精神食粮”。p>
    15.         div>
    16. body>

     css样式

    1.     <style>
    2.         .box{
    3.             background-color: pink;
    4.             background-image: url(./img/bj1.jpeg);
    5.             background-position: no-repeat;
    6.             padding: 35px;
    7.             border: 10px dashed yellowgreen;
    8.             margin-bottom: 20px;
    9.         }
    10.         .border-box{
    11.             background-clip: border-box;
    12.         }
    13.         .padding-box{
    14.             background-clip: padding-box;
    15.         }
    16.         .content-box{
    17.             background-clip: content-box;
    18.         }
    19.     style>

    效果

    background-clip: border-box （大白话理解：）裁剪显示区域，是 在你边框的 “正”下面。

    background-clip: padding-box（大白话理解：）裁剪显示区域，是 在你的边框“以内”的区域。

    background-clip: content-box（大白话理解：）裁剪显示区域，是 你的内容区域。

    （因为我们当前的内容，是在padding里面。索引我们的 剪显示区域 就在padding的里面。）

     CSS3 background-origin背景图片起点

    Origin有“起源”的意思，而background-origin就有“背景图片起点”的意思。它是告诉浏览器background-position是相对于哪里定位的。

    有人会想到background-repeat属性，当这个属性设置为非no-repeat时，这时背景图片就像是孙猴子的猴毛一样的多，那到底是哪个背景图片呢？

    这时你就需要用你的火眼金睛了。

    我们把设置background-repeat: no-repeat;时显示的背景图片称为元背景图片，这是它的真身，我们的background-position属性控制的就是这个真身的位置。

    background-Origin属性指定background-position属性应该是相对位置。background-origin:开始显示的位置，一般是以图片为背景的时候使用。

    注意:如果背景图像background-attachment是"固定"，这个属性没有任何效果。

    background-origin的值有：

    • border-box

    • padding-box（默认值）

    • content-box

    在CSS中，元素被看成一盒子。这个盒子被分解成三个部分，即border-box部分、padding-box部分和content-box部分。

    内容框相对定位的背景图片：

    1.     <style>
    2.         .box{
    3.             background-color: lightblue;
    4.             background-image: url('./img/smiley.gif');
    5.             background-repeat: no-repeat;
    6.             /* 背景定位 */
    7.             background-position: left;
    8.             padding: 35px;
    9.             border: 10px solid black;
    10.             margin-bottom: 20px;
    11.         }
    12.         .border-box{
    13.            background-origin: border-box;
    14.         }
    15.         .padding-box{
    16.             background-origin: padding-box;
    17.         }
    18.         .content-box{
    19.             background-origin: content-box;
    20.         }
    21.     style>
    22. head>
    23. <body>
    24.     <div class="box border-box">
    25.         <h1>环球网评:“五个一百”，涵养向上向善的精神力量h1>
    26.         <p>近日，中国正能量“五个一百”网络精品征集评选展播活动进入公示阶段。经过前期初评、复评、网络投票展播和终评，共评出拟入选网络正能量精品500个和备选网络正能量精品50个。评选活动自2021年6月25日启动以来，总体征集数量超过12.5万余个，围绕时代主题，以先进典型为引领，以精品力作为载体，传播正能量，让公众享受优质的“精神食粮”。p>
    27.     div>
    28.  
    29.     <div class="box padding-box">
    30.         <h1>环球网评:“五个一百”，涵养向上向善的精神力量h1>
    31.         <p>近日，中国正能量“五个一百”网络精品征集评选展播活动进入公示阶段。经过前期初评、复评、网络投票展播和终评，共评出拟入选网络正能量精品500个和备选网络正能量精品50个。评选活动自2021年6月25日启动以来，总体征集数量超过12.5万余个，围绕时代主题，以先进典型为引领，以精品力作为载体，传播正能量，让公众享受优质的“精神食粮”。p>
    32.     div>
    33.  
    34.     <div class="box content-box">
    35.         <h1>环球网评:“五个一百”，涵养向上向善的精神力量h1>
    36.         <p>近日，中国正能量“五个一百”网络精品征集评选展播活动进入公示阶段。经过前期初评、复评、网络投票展播和终评，共评出拟入选网络正能量精品500个和备选网络正能量精品50个。评选活动自2021年6月25日启动以来，总体征集数量超过12.5万余个，围绕时代主题，以先进典型为引领，以精品力作为载体，传播正能量，让公众享受优质的“精神食粮”。p>
    37.     div>
    38.     body>

    效果：

    background-origin: border-box; （大白话理解：）背景图 定位 出现在 边框的 “正”下面。

    background-origin: padding-box; （大白话理解：）背景图 定位 出现在 padding的区域（在border边框和padding交界的那个位置上，就开始出现背景图了）。

     background-origin: content-box;（大白话理解：）背景图 定位 出现在 内容的区域

     

     

  • 相关阅读:
    【C++设计模式之命令模式:行为型】分析及示例
    恶补了 Python 装饰器的八种写法，你随便问~
    第2-4-7章 docker安装WorkBench-规则引擎Drools-业务规则管理系统-组件化-中台
    MindSponge分子动力学模拟——Constraint约束（2023.09）
    从Kafka的可靠性设计体验软件设计之美
    计算机网络(5) ARP协议
    一条SQL语句执行的顺序
    Wireshark下载、Wireshark使用、Wireshark抓包、ARP抓包、ICMP抓包、TCP抓包、HTTP抓包
    java 对多维数组的工具类（比如遍历多维数组工具类）
    软降工程概述----软件过程
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/126016841