ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css笔记1-background

2021-10-26 20:02:01  阅读:108  来源: 互联网

标签:box 背景 指定 笔记 padding background 图像 css


颜色背景(background)

  1. background-image:指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图片”
  2. background-position:指定对象的背景图像位置
    • center:背景图片横向和纵向居中;
    • left:背景图像在横向上填充从左边开始;
    • right:背景图像在横向上填充从右边开始;
    • top:背景图片在纵向上填充从顶部开始;
    • bottom:背景图片在纵向上填充从底部开始;
    • :用长度值指定背景图像填充的位置;
    • :用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小。
  3. background-size:指定对象的背景图像的尺寸大小
    • auto:背景图像的真实大小;
    • cover:将背景图像等比例缩放到完全覆盖容器,背景图像有可能超出容器;
    • contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内;
    • :用长度值指定背景图像大小。不允许负值;
    • :用百分比指定背景图像大小。不允许负值;
  4. background-repeat:指定对象的背景图像如何铺排填充
    • repeat-x:背景图像在横向上平铺;
    • repeat-y:背景图像在纵向上平铺;
    • repeat:背景图像在横向和纵向上平铺;
    • no-repeat:背景图像不平铺;
    • round:背景图像自动缩放直到适应且填满整个容器;
    • space:背景图像以相同的间距平铺且填充满整个容器或某个方向;
  5. background-attachment:指定对象的背景图像是随对象内容滚动还是固定的
    • fixed:背景图像相对于窗体固定;
    • scroll:背景图像相对于元素固定,也就是说当元素滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的父元素或窗体一起滚动;
    • local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容;
  6. background-origin:指定对象的背景图像显示的原点
    • padding-box:从padding区域(含padding)开始显示背景图像;
    • border-box:从border区域(含border)开始显示背景图像
    • centent-box:从content开始显示背景图像;
  7. background-clip:指定对象的背景图片向外裁剪的区域
    • padding-box:从padding区域(不含padding)开始向外裁剪背景;
    • border- box:从border区域(不含border)开始向外裁剪背景;
    • content-box:从content区域开始向外裁剪背景;
    • text:从前景内容的形状(比如文字)作为裁剪区向外裁剪,可实现使用背景作为填充色之类的遮罩效果;
  8. background-color:指定对象的背景颜色

标签:box,背景,指定,笔记,padding,background,图像,css
来源: https://blog.csdn.net/weixin_44536215/article/details/120978341

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有