一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

简介

又跟大家见面了,今天来讲一下常见的css背景background属性中的background-origin属性的运用以及使用的地方.背景图片设置和颜色设置那些都是我们写页面的时候比较常用的,background-origin属性就很容易被大家给忽略掉,也有部分人不熟悉使用,虽然我之前在页面中也很少使用到这个属性,但是我们也应该学起来,说不定什么时候就会用到了呢?

代码块

code.juejin.cn/pen/7088513…

css3的background-origin相对位置的介绍

语法

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

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

案例介绍

html:

<h1>background-origin相对位置的介绍</h1>
  <div class="origin-box1">
    <h2>背景图像填充框的相对位置</h2>
    <div class="box">
      hello world!hello world!hello world!
      hello world!hello world!hello world!
      hello world!
      hello world!
      hello world!
      hello world!hello world!hello world!
      hello world!hello world!hello world!
      hello world!
      hello world!
      hello world!
    </div>
  </div>
  <div class="origin-box1">
    <h2>背景图像边界框的相对位置</h2>
    <div class="box box2">
      hello world!hello world!hello world!
      hello world!hello world!hello world!
      hello world!
      hello world!
      hello world!
      hello world!hello world!hello world!
      hello world!hello world!hello world!
      hello world!
      hello world!
      hello world!
    </div>
  </div>
  <div class="origin-box1">
    <h2>背景图像的相对位置的内容框</h2>
    <div class="box box3">
      hello world!hello world!hello world!
      hello world!hello world!hello world!
      hello world!
      hello world!
      hello world!
      hello world!hello world!hello world!
      hello world!hello world!hello world!
      hello world!
      hello world!
      hello world!
    </div>
  </div>

样式:

.origin-box1{
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  width: 50%;
}
h1{
  font-size: 20px;
}
h2{
  font-size: 16px;
  color: #666;
}
.box{
  border: 10px solid #333;
  padding: 20px 40px;
  background:url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8e1b1a33c8c42829e87559b1595d2f0~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?') no-repeat left center/50px 50px;
}
.origin-box1 .box{
  background-origin: padding-box;
}
.origin-box1 .box2{
  background-origin: border-box;
}
.origin-box1 .box3{
  background-origin: content-box;
}

效果展示:

代码分析

以上案例的代码跟效果可以看出结论,内容设置background-origin: padding-box;的背景图片yoyo是靠近边框的;而内容设置background-origin: border-box;的背景图片yoyo由于边框设置为10px的,所以设置了这个样式之前背景图片是被10px的边框遮挡的;而内容设置background-origin: content-box;的背景图片yoyo是相对于内容一起的,背景图片边框跟填空之后,相比你如果希望你的效果是这样的,就可以这样设置.

浏览器兼容性

ie不兼容,兼容使用以下兼容性好的浏览器.

总结: 本文主要介绍css3的background-origin相对位置属性使用,用于对背景颜色填充图片的相对于什么的定位,根据自身需要来选择添加.以上就这些内容,感谢大家的观看,谢谢~😛