一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

面试官:「background」

(一)background-origin (背景图片相对元素的定位位置)

background-origin值有三个分别如下:

  1. border-box 背景图片相对于元素border区域进行定位
  2. padding-box 背景图片相对于元素padding区域进行定位
  3. content-box 背景图片相对于元素content区域进行定位

代码如下:

.box {
  width: 220px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 10px dashed rgb(19, 216, 95);
  background: rgb(181, 177, 177);
  background-repeat: no-repeat; // 不平铺
  background-image: url('@/assets/01-icon.jpg');

  background-origin: padding-box; // 默认是背景图片开始的位置是从元素的内边距开始
  background-origin: border-box; // 背景图片相对于元素border区域进行定位
  background-origin: content-box; // 背景图片相对于元素content区域进行定位
}

效果如下:
面试官:「background」

(二)background-size (设置背景图片的大小)

background-size可以设置的形式有如下四种:

  1. 百分比 如: 20% 30% 指的是背景图片占据背景区宽度的百分之20,高度的百分之30
  2. 像素 如: 250px 300px 指的是背景图片的宽度为200像素,高度为300像素
  3. 覆盖 如:cover 指的的是保持图片宽高比进行拉伸,使其完全占据背景区
  4. 包含 如: contain 指的是保持图片宽高比进行缩放,使其恰好适合背景区

代码如下:

.box {
  width: 220px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 10px dashed rgb(19, 216, 95);
  background: rgb(181, 177, 177);
  background-repeat: no-repeat; // 不平铺
  background-image: url('@/assets/01-icon.jpg');

  background-size: 40% 60%; // 图片占背景宽度和高度的百分比
  background-size: 100px 40px; // 图片的像素大小
  background-size: cover; // 让图片进行拉伸,让其占满整个背景墙
  background-size: contain; // 保持图片的宽高进行缩放,使其恰好适应背景墙
}

效果如下:

面试官:「background」

(三)background-position (设置背景图片的位置)

background-position总共有5个属性,分别是top、right、bottom、left、center,这个5个属性可以单独使用,也可以两两使用。单独使用时,默认第二个参数为center。

属性值: x y

  1. x取left center right
  2. y取top center bottom

代码如下:

.box {
  width: 220px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 10px dashed rgb(19, 216, 95);
  background: rgb(181, 177, 177);
  background-repeat: no-repeat; // 不平铺
  background-image: url('@/assets/01-icon.jpg');

  background-position: right top; // 右上角
  background-position: center; // x轴和y轴都居中对齐
  background-position: 50% 50%; // 居中对齐
}

效果如下:

面试官:「background」

(四)background-attachment(背景图片是否固定)

背景图片是否固定支持的值以及含义:

  1. scroll: 默认值,背景图片不固定,在视窗内滚动元素时,背景图片跟随元素一起滚动
  2. fixed: 背景图片固定,在视窗内滚动元素时,背景图片不跟随元素一起滚动

(五)background-image渐变

渐变:background-image

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

渐变分为:

  1. 线性渐变background-image: linear-gradient:沿着某条直线朝一个方向产生渐变效果。

linear-gradient(方向,起始颜色,颜色…,终止颜色);

  • 方向:to left to right to top to bottom或者角度30deg顺时针
  • 渐变1:起始颜色,终止颜色:yellow, green
  • 渐变2:颜色+开始位置:
  • 注意:不写方向,表示默认的方向是:从上往下
  1. 径向渐变:从一个中心点开始沿着四周产生渐变效果。

径向渐变background-image: radial-gradient(at left top, yellow, green);

  • radial-gradient(辐射的半径大小(可不写), 中心的位置,起始颜色,终止颜色);
  • 径向渐变标准写法加at,可不考虑兼容,并且前面可以加辐射半径 中心点的位置可以是:at left right center bottom top。如果以像素为单位,则中心点参照的是盒子的左上角。
  1. 重复渐变。
    代码如下:
.box {
  width: 220px;
  height: 170px;
  background-repeat: no-repeat; // 不平铺
  background-blend-mode: luminosity; //设置背景图像或颜色的混合模式

  background-image: url('@/assets/01-cat.jpg'),
    linear-gradient(to right, yellow, white, green);

  background-image: url('@/assets/01-cat.jpg'),
    linear-gradient(135deg, red, green);

  background-image: url('@/assets/01-cat.jpg'),
    linear-gradient(to right, yellow 0%, red 40%, green 70%, blue 100%);
    

  /*辐射半径为100px,中心点在中间*/
  background-image: url('@/assets/01-cat.jpg'),
    radial-gradient(100px at center, red, green);

  // 重复渐变
  background-image: url('@/assets/01-cat.jpg'),
    repeating-linear-gradient(red 5%, green 20%);
}

效果如下:

面试官:「background」

背景图片和img标签对比

  1. 背景图片不占用content内容部分,而img标签会占用。
  2. 背景图片大小如果超出盒子是不会显示的,而img标签如果超出父级盒子默认是会超出显示的。
  3. 何时使用背景图片,何时使用img标签并没有一个明确的标准规定,可以根据实际情况做选择。如果为了给盒子加底色为内容部分加背景,或者是加一些小图标项目符号等,则使用背景图片。如果是明确的想表达一个图片信息,也希望搜索引擎能检索到对应的图片信息,则使用img标签。

原文链接:https://juejin.cn/post/7317222425385320502 作者:Mh

(0)
上一篇 2023年12月28日 下午4:57
下一篇 2023年12月28日 下午5:07

相关推荐

发表评论

登录后才能评论