1.background-color
  设置背景颜色,取颜色值
  注意:
    1.所有元素默认的背景颜色都是透明色,新建窗口的白色不是body的背景色,是浏览器渲染的
    2. 背景颜色从边框位置开始绘制
    3. 如果元素添加内边距,也会按照背景颜色进行填充

2.背景图片
  1.设置背景图片
    属性:background-image
    取值:url()
    注意:1.背景图片的尺寸如果大于元素尺寸,图片仍然按照原始尺寸显示,超出元素的部分不可见
       2.背景图片的尺寸小于元素尺寸,浏览器会自动对背景图片重复平铺,直到铺满元素
       3.背景图片与背景颜色一样,不影响元素正常显示
  2.设置背景图片的重复方式
    图片尺寸不够时,浏览器会自动沿水平和垂直两个方向对图片进行重复平铺,直到铺满元素
    属性:background-repeat
    取值:1.repeat:默认值,沿水平和垂直方向平铺
       2.repeat-x:沿水平方向平铺
       3.repeat-y:沿垂直方向平铺
       4.no-repeat:设置背景图片不重复平铺
  3.设置背景图片的位置
    1.属性:background-position
    2.取值:x y
      1.取像素值:
        x:表示背景图片水平方向的偏移距离
         正值表示图片向右偏移,负值表示图片向左偏移
        y:背景图片垂直方向的偏移距离
         正值表示图片向下偏移,负值表示图片向上偏移
        注意:结合“精灵图”实现元素背景图片调整,这种技术叫“精灵技术”
      2.取百分比
        参照元素尺寸计算水平和垂直偏移距离
        1. 0% 0%:背景图片显示在元素左上角
        2. 50% 50%:背景图片显示在元素中间
        3. 100% 100%:背景图片显示在元素右下角
      3.方位值确定背景图片的位置
        x:left / center / right
        y: top / center / bottom
        如果只设置一个方向上的关键字,另外一个方向默认是center
  4.设置背景图片的大小
    1.属性:background-size
    2.取值:x y
      x y分别表示背景图片的宽和高
      1.像素值
      2.百分比:参照元素宽高尺寸计算背景图片大小
      3.cover:表示将图片等比放大至完全覆盖元素,超出部分不可见
      4.contain:表示将图片等比拉伸至刚好被元素容纳,不能超出元素尺寸,可能或造成背景图片无法完全覆盖元素的效果
  5.背景属性简写
    1.属性:background
    2.取值:color url() repeat position
    注意:1.背景属性按照上面取值的顺序设置
       2.background-size单独设置

转载于:https://www.cnblogs.com/zengsf/p/9794104.html

背景颜色及背景图片相关的属性相关推荐

  1. CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)

    文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...

  2. Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写

    前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

  3. css的背景颜色有哪些,css背景颜色、背景图片,以及列表的多种样式

    背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...

  4. html表格背景图片格式,css背景颜色、背景图片,以及列表的多种样式

    背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...

  5. CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图

    设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...

  6. CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)

    CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...

  7. Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)

    通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...

  8. pc端适配移动端之背景颜色和背景图片

     翻开之前仿作的小米官网页面,打开谷歌浏览器的手机端界面,发现我之前做的界面背景颜色和背景图片会变得非常小,具体图如下: 可以看到我们无论是背景图片或者背景颜色都没有显示出来,针对这个问题先进行了思考 ...

  9. 【ChatGPT】Spire.Doc 给 Word 文档设置背景颜色和背景图片

    使用 Spire.Doc 给 Word 文档设置背景颜色和背景图片 1.首先需要引用 Spire.Doc 的命名空间: using Spire.Doc; using Spire.Doc.Documen ...

  10. android textview 背景图片,Android—TextView 背景颜色与背景图片设置

    Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...

最新文章

  1. 1.4 微生物对人类社会的影响
  2. Mongodb的锁 原子性 隔离性 一致性
  3. 荣耀30会升级鸿蒙吗,荣耀手机也能升级!第三批鸿蒙手机升级名单大曝光:全球第三稳了...
  4. SpringBoot集成MyBatis-Plus自定义SQL
  5. A few thoughts about Open Source Software
  6. 智能一代云平台(四):15年上半年维护过程中精彩小插曲
  7. 如何成为高级测试人?
  8. 使用php第三方包mpdf将网页装换成pdf文件【2】
  9. 解决keil注册机和编译错误的问题2020-12-28
  10. BI工具:cboard\superset 比较
  11. win10 C盘磁盘清理
  12. 【USB电压电流表】基于STM32F103C8T6 for Arduino
  13. 异地监控组网实战案例(速度快)
  14. 插入式CAN总线隔离适配器LCAN-Opto在高空作业平台上隔离干扰、调理信号的应用案例介绍
  15. 芯片优缺点_“碳基芯片”的材料,将采用碳纳米管制成,或比传统芯片提升10倍...
  16. Mac系统 - zsh所有命令失效解决方式
  17. 独立分包中包含app.wxss的问题
  18. 张正友棋盘法定标--Matlab【Camera Calibration Toolbox】
  19. AMD的双向田忌赛马:7nm中端CPU挑落顶级i9,旗舰GPU只对位NV三当家 | CES 2019
  20. Python 与神奇的数学之汉诺塔

热门文章

  1. struts2 Action获取表单数据
  2. 句子中单词首字母大写转换
  3. windows phone7资料整理
  4. Lucene.net 下载地址
  5. configurablebeanfactory
  6. vue --- 前端代理发送http请求
  7. sql中的left join、right join、inner join
  8. 免费节假日API 更新新功能了 新增农历信息返回
  9. 为什么要选择Apache Pulsar(二)
  10. 看网络电子围栏如何做好周界安防