css background-image 学习笔记
先给出图片原样
1、默认从从上到右下1比1 填充的,如果元素的高度和宽度小于图片,则只能显示部分图片。效果如下图
2、如果元素的高度和宽度大于图片,则默认会用图片平铺元素。效果如下图
3、可以是用background-repeat: 设置是否平铺,默认,常用的属性 有 repeat(x,y 两个放系那个平铺),repeat-x (水平平铺),repeat-y (垂直平铺),no-repeat(水平和垂直方向都不平铺);其他不常用属性
background-repeat : space;//用于图片小于 元素, 尽量使用空间平铺完整的图片;
round; //尽可能多的平铺完整的图片,如果不够平铺就 挤压缩放(图片会变形)
inherit;//继承父元素的重复方式;
4、背景图片可以 设置多个,先设置的在最上面,效果如下图;
background-image:url("img/small.jpg") ,url("img/big.jpg") ;
background-repeat: no-repeat;
5、background-position 用于元素大小小于图片时,设置 显示图片的位置(注意这里只的是图像相对于元素左上角的位置,如果是正值效果相当于图片加了定位属性top和left等); 效果如下图
background-position: 50% 50%; //百分比 是相对于 元素大小减去图片大小乘以百分比
6、background-origin : 设置图片的其实位置,取值为border-box,content-box,padding-box,默认是 padding-box
background-origin: content-box;
7、background-clip 裁切图片,超出容器的位置的部分裁切掉,取值为border-box,content-box,padding-box,默认值 为 border-box 开始裁切;
background-clip: content-box;
css background-image 学习笔记的更多相关文章
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- [css]《css揭秘》学习笔记(一)
一.background-clip属性 <html> <head> <meta charset="utf-8"> <title>背景 ...
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS权威指南学习笔记 —— HTML元素分类
HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...
随机推荐
- Automatic Reference Counting
NSObject简化版alloc: struct obj_layout { NSUInteger retained; }; + (id)alloc { int size = sizeof(struct ...
- Jetson AGX Xavier/Ubuntu更改pip3源
pip3换源: 修改~/.pip/pip.conf,如果没有这个文件,就创建一个. 内容如下: [global]index-url = https://pypi.tuna.tsinghua.edu.c ...
- 挑战程序竞赛 反转开关 poj3276
这个我其实也没有看太懂它的证明过程. 1.若某一个位置被翻转了n次,则其实际上被翻转了n%2次. 2.分析易知翻转的顺序并不影响最终结果. 3.现在我们着眼于第1个位置,可知若要将第1个位置进行翻转只 ...
- HC32F003C4PA GPIO Output
1.打开启动文件,找到并跳转至SystemInit函数 void SystemInit(void) { stc_clk_systickcfg_t stcCfg; // TODO load trim f ...
- Qt保持窗口在最上方
原文:https://blog.csdn.net/hl1hl/article/details/85244451 前言 在Qt开发桌面软件的过程中,根据开发的需求不同,我们经常需要将弹出窗口,一般常见的 ...
- Linux内核驱动学习(八)GPIO驱动模拟输出PWM
文章目录 前言 原理图 IO模拟输出PWM 设备树 驱动端 调试信息 实验结果 附录 前言 上一篇的学习中介绍了如何在用户空间直接操作GPIO,并写了一个脚本可以产生PWM.本篇的学习会将写一个驱动操 ...
- Git管理修改、撤销修改、删除文件
什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. a.管理修改 对于提交修改, ...
- Hexo 博客利用 Nginx 实现中英文切换
本文记录了对 Hexo 博客进行中英文切换的配置过程,实现同一应用共用模版,任何页面可以切换到另一语言的对应页面,并对未明确语言的访问地址,根据浏览器语言进行自动跳转 实现细则 中英文地址区分 博客中 ...
- xsser和XSStrike
0x01 xsser xsser是一款用于针对Web应用程序自动化挖掘.利用.报告xss漏洞的框架.kali默认安装. 命令行启动:xsser 图形化界面启动:xsser --gtk 帮助信息:xss ...
- R的安装以及包安装
今天看论文,需要用到R语言的库,于是又折腾了半天.. 其实并没有什么太大的问题,只是在第三方包的下载方面还有python中使用R方面遇到了问题: 第三方包的导入 其实在网上有 ...