记录background背景图的特性

介绍

background背景图的一些特性记录

background-image

• background-image不光可以导入url()背景图 还可以设置线性渐变linear-gradient 让图片有一种朦胧感觉
• linear-gradient 属性支持各种方向的线性渐变 详细看这里 (opens new window)
• 别忘了设置背景图 要设置no-repeat 防止他铺不满会出现多个图片

background-image: linear-gradient(to left, rgba(255, 0, 149, 0.2), rgba(0, 247, 255, 0.2)), url(https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/gaitubao_background_oeuhe7_webp.webp) no-repeat;

不设置 linear-gradient的效果

• 就是原图效果

设置linear-gradient的效果

background-attachment

• background-attachment 这个属性可以让背景图固定视口内 实现下拉慢慢显示的效果背景图(有点像覆盖那种效果) 具体可以 到这里看看 (opens new window)
• fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

background-attachment: fixed;

设置fixed效果

不设置fixed的效果

background-size

• 这个属性最常用来设置背景图是否平铺充满整个容器 通常用来作为页面的背景图 可以到 这里详细看看 (opens new window)
• background-size最常用的是 cover和100% 注意background-size:100%和background-size:100% 100% 不一样!
  • background-size:100% 100% 会让背景图随着拉伸而自适应 换句话就是跟100vw 100vh效果一样 浏览器缩放的时候也会让图片拉伸缩放会变形 所以不常用
  • background-size: cover和background-size: 100% 都是将图片扩大或者缩放来适应整个容器 作为背景图十分的方便 浏览器缩放的时候图片也会跟着等比缩放不会变形拉伸
• background-size 可以设置背景容器的大小background-size: 100% 100% (左右 上下) 相当于给背景图开了一个独立的窗口 如果不设置background-position那么 默认是吸顶水平居中

设置 cover或100%的效果

不设置 cover或100%的效果

• 图片显示不全 真成了冰山一角啦

单值和双值区别

• background-size单值对应的是宽度其高度默认为auto, 双值对应的是宽度和高度

  • auto以背景图片的比例缩放背景图片。当你单独设置一个值为auto, 那么这个值只会等比缩放并且会拉伸背景,类似于object-fit (opens new window)的fill属性, 通常我们需要设置两个值, 对应其宽高

  

其他特性

• background-size可以规定一个整体背景大小, 也可以调整单个背景, 如果你给他设置一个规定的像素同时保持background-repeat (opens new window)为repeat重复背景(默认值), 那么背景会按照大小重复排列

举个例子

• 通过radial-gradient()线性渐变画一个圆圈, 给background-repeat默认行为设置为不重复no-repeat, background-size设置为20px

  <div class="one-box">
    <!-- 点状背景 -->
  </div>

  .one-box {
    height: 100svh;
    width: 100svw;
    background-image: radial-gradient(#00000021 5px, transparent 5px);
    background-size: 20px 20px;
    background-repeat: no-repeat;
  }

• 那么背景效果就是一个单独的小原点(为了方便, 浏览器放大200%)

• 这时候把background-repeat改为repeat重复背景行为(repeat是背景默认行为), 给背景色设备白色, background-size尺寸小一点缩小一下灰色点点, 就能得到点状背景效果

  .one-box {
    height: 100svh;
    width: 100svw;
    background-image: radial-gradient(#00000021 1px, transparent 1px);
    background-size: 5px 5px;
    background-position: -13px -3px;
  }

• 这种效果是不是很有意思, 让纯色背景不那么空洞, 又不印象整个页面的观感

background-position

• background-position (opens new window) 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin (opens new window) 定义的位置图层的。

  • 用法和其他css位置属性一样 分为 上 左 下 右 和 左右 上下
  • background-position 默认是background-position: center 0%; 也就是吸顶水平居中

  

动画示例

• background-size设置 背景容器大一些 让后通过animation (opens new window)动画 修改background-position背景图的位置 从而实现一些背景渐变效果

 <template>
  <div class="iPhone-text">
      灵动的 iPhone 新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone
      芯片中的速度之王，为一切提供强大原动力。
  </div>
</template> 

<style lang="scss" scoped>
  .iPhone-text {
    width: 100%;
    // 设置渐变背景色
    background: linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff, transparent 75%, transparent);
    background-size: 100% 600%;
    background-position: center 0%;
    animation: textScroll 5s infinite linear alternate; // infinite无限循环 linear线性动画 alternate交替动画(循环动画 往返效果)
  }
  @keyframes textScroll {
  100% {
    background-position: center 100%;
  }
}
</style>

• 实现效果

background-clip

• background-clip这个属性是用来控制背景颜色的作用域 这里就涉及到了css的盒模型这个概念
• 他和box-sizing属性的概念差不多 也分为border-box和content-box 他俩通常可以打匹配使用

border-box 属性

• border-box背景延伸至边框外沿（但是在边框下层）。这个是默认属性
• 这个时候 边框会和背景融为一体 当你设置padding 内边距的时候 也不能让边框分离

例子

• 我们设置一个 普普通通的边框盒子 border-box你可以不设置 因为他是默认值

  .box {
    width: 200px;
    height: 200px;
    background-color: aqua;
    background-clip: border-box;
    border: 5px dashed #ff3040;
  }

• 效果就跟我们平常写边框一样

padding-box 属性

• padding-box背景延伸至内边距（padding (opens new window)）外沿。不会绘制到边框处。
• 这个属性可以让我们的边框在背景外 不让边框和背景融为一体
• 如果你的盒子模型是box-sizing: border-box; 那么padding内边距的属性对他无效

例子

• 设置padding-box 同时设置box-sizing: border-box;

  .box {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: aqua;
    background-clip: padding-box;
    /* 这个时候padding无效 写了也不生效 触发改成标准盒模型 box-sizing:content-box; */
    padding: 20px;
    border: 5px dashed #ff3040;
  }

• 效果就是 边框到了背景的外面

content-box 属性

• content-box 背景被裁剪至内容区外沿。
• 如果我们想让padding有效果就可以设置他 配合我们的box-sizing 实现一个有缝隙的边框 这样可以高度自定义这个边框离盒子背景的距离

例子

• 设置content-box 同时设置box-sizing: border-box;

  .box {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: aqua;
    background-clip: content-box;
    padding: 5px;
    border: 5px dashed #ff3040;
  }

• 效果就是带有边距的边框盒子

text 属性

• 这个属性十分的特殊 他和上面的几个属性并无关联 他的作用可以把 背景裁剪成文字的前景色(也就是把背景作为文字的颜色color)。
• 通常我们可以用它做一些文字的渐变纹理 让文字可以使用background的linear-gradient渐变效果
• 这个属性需要搭配来用 我们还需要吧字体设置为透明色 默认字体是黑色没有这个效果 background-clip: text; + color: transparent;
• 注意: 这个属性兼容性很差 需要在加上-webkit-谷歌和-moz-火狐 内核标识防止不识别

例子

• 我们设置一个渐变字体

   
<body>
    <div class="box">
      我是渐变字体
    </div>
</body>    
<style>
  .box {
      margin: 0 auto;
      width: 300px;
      height: 200px;
      font-size: 48px;
      text-align: center;
      background: linear-gradient(to left, #e66465, #9198e5);
      /* 这个属性兼容性很差 还需要设置浏览器内核适配 */
      background-clip: text;
      /* -webkit- 进行浏览器内核的适配 */
      -webkit-background-clip: text;
      -moz-background-clip: text;
      /* 一定要把盒子变为透明色! */
      color: transparent;
    }
</style>

• 效果就是一个渐变字体的效果

• 对效果图

background 设置背景图的代码

• 这里记录一下快速设置背景图的css ( 前提你必须让盒子占满整个屏幕用100vh 等等...)

/** 背景图的css代码 **/
.secondClass{
    height: 100vh;
    background-image: linear-gradient(270deg,rgba(255,0,149,.2),rgba(0,247,255,.2)),url(https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/gaitubao_background_oeuhe7_webp.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

• 背景图的展示效果
  • 请无视那些小组件

注意事项

• background-attachment 和 background-position 不要一起使用 background-attachment的效果会被替代