background详解

曾经终败给现在 2023-05-21 13:57 98阅读 0赞

background-position

  • 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。
  • 如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为 50%(即 center) ;
  • 如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标, 取值可以是方位关键字 left\top\center\right\bottom, 如 background-position: left center ; 也可以是百分比或长度, 百分比和长度可为设置为负值, 如: background-position: 10% 30px
  • 另外 css3 支持3个值或者4个值, 注意如果设置3个或4个值, 偏移量前必须有关键字, 如: background-position: right 20px bottom 30px;

示例代码

  1. <html>
  2. <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
  3. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat;
  4. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;box-sizing: content-box">
  5. background-position:0 0
  6. </div>
  7. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 no-repeat;
  8. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  9. background-position:0
  10. </div>
  11. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) top no-repeat;
  12. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  13. background-position:top
  14. </div>
  15. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) left no-repeat;
  16. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  17. background-position:left
  18. </div>
  19. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) center no-repeat;
  20. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  21. background-position:center
  22. </div>
  23. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 10px 50% no-repeat;
  24. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  25. background-position:10px 50%
  26. </div>
  27. </div>
  28. </html>

20210818160321447.png

background-size

  • 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
  • cover: 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 contain 值相反, cover 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。 该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。
  • contain: 缩放背景图片以完全装入背景区,可能背景区部分空白。 contain 尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。 该背景图会填充所在的容器。当背景图和容器的大小的不同时, 容器的空白区域(上/下或者左/右)会显示由 background-color 设置的背景颜色。
  • 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为 auto。 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。

示例代码

  1. <html>
  2. <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
  3. <div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/contain no-repeat;
  4. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  5. background-size:contain
  6. </div>
  7. <div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/cover no-repeat;
  8. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  9. background-size:cover
  10. </div>
  11. <div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/120px no-repeat;
  12. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  13. background-size:120px
  14. </div>
  15. <div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/120px 100px no-repeat;
  16. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  17. background-size:120px 100px
  18. </div>
  19. </div>
  20. </html>

20210818160359571.png

background-origin

  • 规定了指定背景图片 background-image 属性的原点位置的背景相对区域.
  • 注意:当使用 background-attachmentfixed 时,该属性将被忽略不起作用。
  • 初始值:padding-box

    • border-box:背景图片的摆放以 border 区域为参考
    • padding-box:背景图片的摆放以 padding 区域为参考
    • content-box:背景图片的摆放以 content 区域为参考




    padding-box


    content-box


    border-box


watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70

background-clip

  • 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
  • 如果没有设置背景图片(background-image)或背景颜色(background-color), 那么这个属性只有在边框( border)被设置为非固实(soild)、透明或半透明时才能看到视觉效果 (与 border-styleborder-image 有关),否则,本属性产生的样式变化会被边框覆盖。
  • 初始值:padding-box

    • border-box:背景延伸至边框外沿(但是在边框下层)。
    • padding-box:背景延伸至内边距(padding)外沿。不会绘制到边框处。
    • content-box:背景被裁剪至内容区(content box)外沿。




    background-clip:padding-box


    background-clip:content-box


    background-clip:border-box


watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70 1

background-attachment

  • scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。

    • 对于 scroll,一般情况背景随内容滚动,但是有一种情况例外。 对于可以滚动的元素(设置为 overflow:scroll 的元素)。 当 background-attachment 设置为 scroll 时,背景图不会随元素内容的滚动而滚动。
  • fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了 body 上。
  • local:背景图相对于元素内容固定。









background-repeat

定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。


























作用
repeat 图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.
space 图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.
round 随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
no-repeat 图像不会被重复
  1. <html>
  2. <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
  3. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat;
  4. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  5. background-repeat:no-repeat
  6. </div>
  7. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat;
  8. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  9. background-position:repeat
  10. </div>
  11. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat-x;
  12. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  13. background-position:repeat-x
  14. </div>
  15. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat-y;
  16. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  17. background-position:repeat-y
  18. </div>
  19. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 space;
  20. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  21. background-position:space
  22. </div>
  23. <div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 round;
  24. height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
  25. background-position:round
  26. </div>
  27. </div>
  28. </html>

20210818160633277.png

注意点

  • background-positionbackground-size 属性, 之间需使用/分隔, 且 position 值在前, size 值在后。
  • 如果同时使用 background-originbackground-clip 属性, origin 属性值需在 clip 属性值之前, 如果 originclip 属性值相同, 则可只设置一个值。
  • background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;

多个图片设置

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <style>
  8. .bg-test{
  9. background-image: url("https://miofly.gitee.io/res/img/glnz/0.jpg"), url("https://miofly.gitee.io/res/img/glnz/1.jpg");
  10. background-position: left, right;
  11. background-size: contain, 150px 50px;
  12. background-repeat: no-repeat, no-repeat;
  13. background-color: red;
  14. }
  15. </style>
  16. <div class="bg-test">
  17. 这是一段文字,有两个背景图片
  18. </div>
  19. </body>
  20. </html>

20210818160733720.png

发表评论

表情:
评论列表 (有 0 条评论,98人围观)

还没有评论,来说两句吧...

相关阅读

    相关 background

    background(简写) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 background: red url(i

    相关 css中background系列详解

    研究了background相关的属性,虽然很简单,但有些还是不知道,整理出来系统的学习一下,也会更好的掌握这些知识点(细节决定成败,哈哈) background相关的属性有(

    相关 background-size属性详解

    css `background-size` 属性详解,`background-size` 指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以