CSS学习笔记(七) 背景

Pikachu 发布于2019-08-28 18:03 / 775人阅读

摘要：任何方向上都不重复只让背景图片显示一次。，背景图片就会以段落的中心点为起点。第一个值表示水平位置，第二个值表示垂直位置。拉大图片，使其完全填满背景区保持宽高比。提示渐变是帮我们生成的背景图片。

在CSS里面，每个元素盒子都可以想象成由两个图层组成。

前景层：内容（如文本或图片）和边框。

背景层：用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（使用 background-image 属性），背景图片叠加在背景颜色之上。

在 CSS3 被浏览器实现之前，只能在背景颜色上添加一张图片。而现在，我们可以为背景图层添加多张图片（以及 CSS3 渐变）。

CSS背景属性：

background-color

background-image

background-repeat

background-position

background-size

background-attachment

background（简写属性）

background-clip、background-origin、background-break（目前尚未得到广泛支持）

1.背景颜色

格式：background-color: 颜色值;
示例：background-color: #caebff;

2.背景图片

格式：background-image:url(图片路径/图片文件名);
示例：background-image:url(images/blue_circle.png);

默认情况下背景图片会 以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域。

3.背景重复

格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
说明：

repeat 默认值，水平和垂直方向都重复，直至填满元素的背景区域为止。

repeat-x 水平方向重复。

repeat-y 垂直方向重复。

no-repeat 任何方向上都不重复（只让背景图片显示一次）。

4.背景位置

用于控制背景位置的 background-position 属性，是所有背景属性中最复杂的。

该属性有5个关键字值，分别是 top、left、bottom、right 和 center，这些关键字中的任意两个组合起来都可以作为该属性的值。

background-position 属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。默认情况下，background-position的原点位于左上角。

第一种情况，使用关键字来设定位置。background-position属性的默认值 top、left 控制着水平和垂直方向重复的起点。如修改 起点位置：p#center {background-position:center center;}（简化写法：background-position:center，设定一个关键值，则另一个也会取相同的值。），背景图片就会以段落的中心点为起点。

第二种情况，使用百分比来设定位置。
示例：background-position:50% 50%;，再把 background-repeat 设定为 no-repeat，就能实现了图片在背景区域内居中的效果。第一个值表示水平位置，第二个值表示垂直位置。要是只设定一个值，则将其用来设定水平位置，而垂直位置会被设为 center。

第三种情况，使用绝对或相对单位的数值。要是使用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。另外，还可以使用负值，这样可以把图片的左上角定位到元素外部，从而在元素中只能看到部分图片。当然也可以给图片设定足够大的正值，把图片的右下角推到元素外部实现同样的效果。

5.背景尺寸

background-size 是 CSS3 规定的属性，用来控制背景图片的尺寸。

可设定的值和含义如下：

50%：缩放图片，使其填充背景区的一半。

100px 50px：把图片调整到 100 像素宽，50 像素高。

cover：拉大图片，使其完全填满背景区；保持宽高比。

contain：缩放图片，使其恰好适合背景区；保持宽高比。

注意：把很小的图片拉大会导致图片质量失真。

6.背景粘附

background-attachment属性控制滚动元素内的背景图片是否随元素滚动而滚动。

属性值有：

scroll。背景图片随元素移动。

fixed。背景图片不会随元素滚动而移动。

提示：background-attachment:fixed 最常用于给 body 元素中心位置添加淡色水印，让水印不随页面滚动而移动。

7.简写背景属性

示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
说明：声明中少写了哪个属性的值（比如没写 no-repeat），就会使用相应属性的默认值（ repeat）。

9.多背景图片

CSS3 可以给元素背景添加多个背景图片。

示例：

p {
    background:
    url(images/turq_spiral.png) 30px -10px no-repeat,
    url(images/pink_spiral.png) 145px 0px no-repeat,
    url(images/gray_spiral.png) 140px -30px no-repeat,  #ffbd75;
}

10.背景渐变

渐变，就是在一定长度内两种或多种颜色之间自然的过渡。

提示：渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性，也可以使用简写 background 属性。

渐变分两种：

线性渐变。从元素的一端延伸到另一端。

放射性渐变。从元素内一点向四周发散。

11.厂商前缀

为鼓励浏览器厂商尽早采用 W3C 的 CSS3 推荐标准，于是就产生了 VSP（Vendor Specific Prefixes，厂商前缀）的概念。

示例：
transform 属性的标准语法是这样的：
transform: skewX(-45deg);

由于这个属性还没有完全定案，为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性，应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明：

-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */
-ms-transform:skewX(-45deg); /* 微软 Internet Explorer */
-o-transform:skewX(-45deg); /* Opera */
transform:skewX(-45deg); /* 最后是 W3C 标准属性 */

以下 CSS3 属性必须加 VPS：

border-image translate

linear-gradient transition

radial-gradient background*

transform background-image*

transform-origin
> *针对背景图片或渐变

参考资料

CSS设计指南

专线服务服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110987.html

Programming Computer Vision with Python （学习笔记七）

摘要：数学形态学关注的是图像中的形状，它提供了一些方法用于检测形状和改变形状。所以这个结果也会把形状以外的噪点排除掉。你还可以查看其它笔记。参考资料图像的膨胀与腐蚀数学形态学基本操作及其应用计算机视觉特征提取与图像处理第三版数学形态学（mathematical morphology）关注的是图像中的形状，它提供了一些方法用于检测形状和改变形状。起初是基于二值图像提出的，后来扩展到灰度图像。...

Charles 2019-07-31 10:50 评论0 收藏0
26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
jQuery入门笔记之（七）插件

摘要：目前插件已超过几千种，由来自世界各地的开发者共同编写验证和完善。而对于开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。也就是说，插件也是代码，通过文件引入的方式植入即可。现在我们就完成了一个下拉菜单的插件。插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界...

defcon 2019-08-19 17:44 评论0 收藏0
前端复习笔记

摘要：一基本结构设置字符编码集格式网页头部二文本标记加粗倾斜下划线删除线上标下标三引用样式表的方式内联样式在元素的开始标签里，设置一个属性，并设置对应的属性名及属性值例使用场景里，使用给元素添加样式内部样式表在标签里加上一对标签，并且在标签设置对一、基本结构 //设置字符编码集格式 // //网页头部二、文本标记1.加粗 b2...

yhaolpz 2019-04-23 11:46 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0