CSS图片背景样式（下）-阿里云开发者社区

CSS图片背景样式（下）

2023-02-09 128

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS图片背景样式（下）

background-size

background-size 取值有：contain | cover | 100px 100px | 50% 100%;

<style type="text/css">
      .allen{
         background-image:url('./dogge.png') ;
         background-repeat:no-repeat;
         /*
         background-position:left bottom;
         background-attachment: fixed;
         */
         background-size: contain;
         padding-top: 80px;
         height: 500px;
         width: 600px;
         border: 1px solid red;
       }
    </style>
  </head>
  <body>
    <p class="allen">是谁在偷偷学习呀？注意劳逸结合，保持最佳状态！</p>
  </body>
</html>

运行结果：

修改一下上面运行的代码：

background-repeat:no-repeat;

 background-size: cover;

background-clip

默认值是border-box，语法是：background-clip:border-box|padding-box|content-box;

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .box {
      width: 400px;
      height: 260px;
      background-image: url('cat.png');
      /* background-repeat: no-repeat; */
      border: 15px dashed salmon;
      padding: 2px;
      font-size: 60px;
      text-align: center;
      color: #fff;
    }
    .box1 {
      -webkit-background-clip: border-box;
      background-clip: border-box;
    }
    .box2 {
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      border-color: aquamarine;
    }
    .box3 {
      -webkit-background-clip: content-box;
      background-clip: content-box;
      border-color: skyblue;
    }
    .box4 {
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 60px;
      font-weight: bold;
    }
    </style>
  </head>
  <body>
    <div class="box box1">hello<br>word1</div>
    <div class="box box2">hello<br>word2</div>
    <div class="box box3">hello<br>word3</div>
    <div class="box box4">hello<br>word4</div>
  </body>
</html>

图片的默认根据 background-position: left top; 展示的, 只不过 clip(被裁掉) 了不同的区域。

background-origin

background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .box {
        width: 400px;
        height: 260px;
        background-image: url('cat.png');
        /* background-repeat: no-repeat; */
        border: 15px dashed salmon;
        padding: 2px;
        font-size: 60px;
        text-align: center;
        color: #fff;
      }
      .box1 {
                  background-origin: border-box;
              }
        .box2 {
                  background-origin: padding-box;
              }
      .box3{       
                  background-origin: content-box;
              }
    </style>
  </head>
  <body>
    <div class="box box1">hello<br>word1</div>
    <div class="box box2">hello<br>word2</div>
    <div class="box box3">hello<br>word3</div>
  </body>
</html>