WEB前端--背景相关知识点总结

时间:2022-08-31 13:58:02

一、背景(background)

它是单一属性

但是它衍生出很多的复合属性

background-color       背景色

background-image     背景图片

background-repeat      背景图片是否重复

background-position    背景图片位置

background-attachment  背景图片是否滚动

1、背景颜色

内容可以把容器的宽高撑开  背景不会占用内容的宽高  背景色会铺满整个容器  transparent背景透明(默认)

WEB前端--背景相关知识点总结

WEB前端--背景相关知识点总结

WEB前端--背景相关知识点总结

2、背景图片

background-image  url(图片地址)

WEB前端--背景相关知识点总结

WEB前端--背景相关知识点总结

3、背景平铺

background-repeat:  背景图是否平铺

no-repeat  不平铺

repeat-x    横向平铺

repeat-y   纵向平铺

repeat    全部平铺(默认值)

WEB前端--背景相关知识点总结

WEB前端--背景相关知识点总结

4、背景图片的位置

background-positon:x y

传数值    代表背景图片离容器左上角的距离

x

  负值  从容器的左边往左边走的距离

y

  正值  从容器的上边往下边走的距离

  负值  从容器的上边往上边走的距离

传关键字

x

  left  图片的左边  center  图片在容器x轴的中心  right  图片在容器的右边

y

  top  图片的上边  center  图片在容器y轴的中心  bottom  图片在容器的下边

注意:

  如果只传一个值  另一个值默认为center

  如果都不传  默认为左上角

WEB前端--背景相关知识点总结

5、background-attachment  背景图片是否滚动

scroll  跟随滚动条滚动(默认)  fixed  不会跟随滚动条滚动

WEB前端--背景相关知识点总结

6、background的复合样式:

  

WEB前端--背景相关知识点总结

WEB前端--背景相关知识点总结的更多相关文章

  1. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

  2. Java web 前端面试知识点总结

    经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性 ...

  3. Web 前端 注意知识点

    一.  前端使用技巧: 1. button的用法.在使用按钮时可以*在内设置style属性,来改变形态.可以给予type=sbumit提交属性. 2. 各种使用符号: # <!--小于 大于 ...

  4. WEB前端基础知识点

    因为要告知浏览器的解析器用什么文档标准解析这个文档,所以在文档的开头要写上文档类型声明,H5的文档类型声明要比H4文档类型声明简洁的多.因为H5不基于SGML(标准通用标记语言),所以不需要对DTD文 ...

  5. web前端常用知识点

    1.常见的块级元素  内联元素   div -最常用的块级元素      dl - 和dt-dd 搭配使用的块级元素      form - 交互表单      h1 -h6- 大标题      hr ...

  6. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  9. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. 谈谈duilib

    据我所知,duilib已经不再维护了,q群也不再对外开放了. 尽管不再更新,但duilib的学习价值还是很好的.当有一定基础后再扩展duilib的功能,或根据duilib学习到的知识去着手写自己的界面 ...

  2. 记一次苦逼的SQL查询优化

    最近在维护公司项目时,需要加载某页面,总共加载也就4000多条数据,竟然需要35秒钟,要是数据增长到40000条,我估计好几分钟都搞不定.卧槽,要我是用户的话估计受不了,趁闲着没事,就想把它优化一下, ...

  3. JavaScript高级 函数表达式 《JavaScript高级程序设计(第三版)》

    函数表达式的特征 使用函数实现递归 使用闭包定义私有变量 前面我们说到定义函数有两种方式:函数声明.函数表达式. 两者的区别在于函数声明提升,前者在执行之前的上下文环境中直接被赋值,而后者不会. 一. ...

  4. ERP 实施和应用不成功共同点

    ERP 实施和应用不成功共同点     ERP 重新得到人们理性的关注并不意味着实施和应用ERP变得轻而易举了.如何才能实施好ERP?这仍然是关键的问题. 大部份企业应用ERP不成功的原因是什么,许多 ...

  5. 【C&plus;&plus;】命令行Hangman &num;2015年12月15日 00&colon;20&colon;27

    增加了可以在构造Hangman对象时通过传入参数设定“最大猜测次数”的功能.少量修改.# 2015年12月15日 00:20:22 https://github.com/shalliestera/ha ...

  6. Delphi TcxTreelist 表格左边总是缩进去 ,好像有偏移 解决方法

    1.  TcxTreelist的表格总是总是缩进去,如下效果 : 但是,新建一个没有偏移 ,经过观察,原来在  属性Images造成的,  把imgToolbars去除就可以了. 效果:

  7. NTP服务器时间同步

    CentOS 配置服务器NTP同步 1 查看是否安装 rpm -aq | grep ntp 2 安装 yum -y install ntp 3 配置 /etc/ntp.conf restrict 访问 ...

  8. 蜻蜓FM 涉嫌诈骗投资人和广告主源代码剖析

    本文主要内容,引用自知乎的这篇文章:如何评价蜻蜓 FM 伪造用户活跃度等数据 感谢"左莫"."任正"等热心正义的网友--左莫,任正的最早的回答猜测已经被蜻蜓FM ...

  9. 【BZOJ2816】【ZJOI2012】网络(Link-Cut Tree)

    [BZOJ2816][ZJOI2012]网络(Link-Cut Tree) 题面 题目描述 有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相 ...

  10. Compile C&plus;&plus; code in Matlab with OpenCV support

    Provides a function named as "mex_opencv(src)" The code function mex_opencv(src) ARC = 'x6 ...