CSS入门篇16.背景样式（二）

大白菜·

于 2022-09-01 16:07:21 发布

阅读量529

点赞数 1

文章标签： css 前端 html javascript java

本文链接：https://blog.csdn.net/m0_62404129/article/details/126645432

版权

本文详细解读了CSS背景属性background-clip、background-origin和background-size的用法，包括它们的不同取值、作用原理以及代码示例，助您理解背景图片布局的控制。

摘要由CSDN通过智能技术生成

5:background-clip

设置背景色的范围

可选值：

border-box 默认值，背景颜色会出现在边框的下边

padding-box 背景不会出现在边框，只会出现在内容区和内边距

content-box 背景只出现在内容区

6:background-origin

设置背景图片的偏移量计算的原点,配合偏移量使用的

padding-box 从内部距处开始计算

content-box 背景图片的偏移量从内容区处计算

border-box 从边框开始计算偏移量

代码演示为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .box1 {
        height: 500px;
        width: 500px;
        padding: 20px;
        border: 10px red double;
        margin: 0 auto;
        /*设置一个背景颜色*/
        background-color: #bfa;
        /* 设置背景色的范围 */
        /* background-clip:content-box; */
        /* 设置背景图片 */
        background-image: url(./img/gaitubao_小图_png.png);
        /*设置背景图不平铺 */
        background-repeat: no-repeat;
        /*设置背景图的位置 */
        background-position:0px 0px ;
        /* 设置背景图的偏移的原点 */
        background-origin:content-box ;
      }
      .box2{
        width: 100%;
        height: 100%;
        background-color: blanchedalmond;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <!-- <div class="box2"></div> -->
    </div>
  </body>
</html>

效果图为：

7:background-size

设置图片的大小

参数：

第一个值：宽度

第二个值：高度

如果只写一个，第二值，默认为auto

cover 图片的比例不变，将元素铺满

contain 图片比例不变，将图片完整显示

演示代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        height: 500px;
        width: 500px;
        border: 10px red double;
        background-image: url(./img/大图2.webp);
        background-repeat: no-repeat;
        /* 设置图片的大小 */
        background-size:cover;
      }

    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
    </div>
    </div>
  </body>
</html>

效果图为：