欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

background-clip,background-origin和background-position

程序员文章站 2022-03-28 20:21:33
...

background-postion

规定背景图片的位置

  1. px 第一值是x轴,第二个是y轴,默认是从左上角开始的,如果只设置第一个,第二个默认是auto

  2. 百分比,根据相对于父元素

  3. top | center | bottom | left | center | right

  4. cover 把图像扩展至足够大,以使背景完全覆盖背景区域。背景图像的某些部分会无法显示(保持等比比例)

  5. contain 吧图片扩展到最大尺寸,使宽度和高度完全适应区域(保持等比比例)会使背景区域一部分为空白

background-origin

origin 有起源的意思,background-origin是背景起点的位置(从哪定位),告诉浏览器background-position根据哪里定位的。也就是说background-postition根据background-origin的位置变化的。默认是从内边距的位置开始展示背景图片。

有三个参数分别为content-box, padding-boxborder-box

content-box 是指从内容的位置开始定位展示背景图片

padding-box 是指从内边距的位置开始定位展示背景图片

border-box 是指从外边框的位置开始定位展示背景图片

如果当内边距为0的话,content-box跟padding-box是一样的效果

如果当外边框为0的话,border-box跟padding-box是一样的效果

style

 div {
  background: url('../a.png') no-repeat;
  width: 100px;
  height: 100px;
  padding: 40px;
  border: 50px dashed #ccc;
  display: inline-block;
  margin-right: 20px;
 }
 .bgImg1 {
      background-origin: content-box;
 }
 .bgImg2 {
      background-origin: padding-box;
 }
 .bgImg3 {
      background-origin: border-box;
 }

html

  <div></div>
  <div class="bgImg1"></div>
  <div class="bgImg2"></div>
  <div class="bgImg3"></div>

background-clip,background-origin和background-position

background-clip

background-clip规定背景图片如何去截取展示,多余的部分会被截取掉

有三个参数: content-box, padding-boxborder-box

content-box 是指在内容的位置展示,多余的部位会被截取掉

padding-box 是指在内边距的位置展示,多余的部位会被截取掉

border-box 是指在外边框的位置展示,多余的部位会被截取掉

style

  div{
    background: url('../../img/a.png') no-repeat;
    width: 100px;
    height: 100px;
    padding: 40px;
    border: 50px dashed #ccc;
    display: inline-block;
    margin-right: 20px;
  }
  .bgImg1 {
    background-origin: border-box;
  }
  .bgImg2 {
    background-clip: padding-box;
  }
  .bgImg3 {
    background-clip: content-box;
  }

html

  <div class="bgImg1"></div>
  <div class="bgImg2"></div>
  <div class="bgImg3"></div>

background-clip,background-origin和background-position

相关标签: CSS3 css css3