【丛林】CSS background 背景浅谈

tinyq 发布于2019-08-29 16:09 / 2872人阅读

摘要：不建议使用英文代码，不同浏览器对不同颜色代码处理的效果有可能不同。背景图像指定显示的背景图片，用设置路径。固定，当页面的其余部分滚动时，背景图像不会移动。

定义和用法 基本属性：color, image, position, repeat 背景颜色 background-color

值为颜色值或transparent二者选其一,默认值是transparent（透明）。

颜色值可以为16进制颜色码或者RGB颜色值，也可以是英文代码。不建议使用英文代码，不同浏览器对不同颜色代码处理的效果有可能不同。

设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持，而背景梯度等更奇异的特性只在较新的浏览器中得到支持，加上背景图像可能由于某种原因无法加载。因此，设置基本的背景颜色和指定这些特性是一个好主意，因此无论如何，元素的内容都是可读的。

背景图像 background-image

指定显示的背景图片，用url()设置路径。

默认的图片重复方式为水平垂直皆重复。

背景重复 background-repeat

指定背景图像如何重复的，默认值是repeat（一直重复，直到整个元素的背景被填充）

值	描述
no-repeat	不重复
repeat	垂直和水平都重复
repeat-x	X轴方向（水平）重复
repeat-y	Y轴方向（垂直）重复

背景位置 background-position

指定定位背景图片的位置，原点为左上角（0,0）。

可输入两个值代表 X 轴和 Y 轴，也可以只输入一个值。

可输入长度值（px等）、相对值（rem等）、百分比、关键字（left，center，right,top，bottom）

若只输入一个值，则代表 X 轴的值，Y 轴变成center

值可以混搭，如background-position:9px top;

额外属性 背景滚动 background-attachment

指定当内容滚动时背景如何滚动。

值	描述
scroll	默认值。滚动，背景图随着页面的滚动而移动。
fixed	固定，当页面的其余部分滚动时，背景图像不会移动。

待研究：
https://developer.mozilla.org...

GPU云服务器云服务器设计浅谈浅谈javascript Background 浅谈sdwan解决方案

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

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

【丛林】CSS 边框浅谈

摘要：如果边框样式是，边框宽度实际上会重置为。不允许指定负长度值。值描述定义无边框。不过应用于表时除外，对于表，用于解决边框冲突。如果没有为边框声明颜色，它将与元素的文本颜色相同。这个值用于创建有宽度的不可见边框。扩展属性边框图像定义和用法围绕元素内容和内边距的一条或多条线。基本属性：宽度、样式、颜色宽度 border-width border-width 简写属性为元素的所有边...

seanlook 2019-08-29 16:16 评论0 收藏0
【丛林】HTML Table 表格浅谈（边框、隔行变色

摘要：表格的一个单元格，一行中包含几对，一行中就有几列。。表格的头部的一个单元格，表格表头。表格标题属性表格边框的宽度。表格单元边界与单元内容之间的间距内边距。单元格之间的间距。可填写或任意数字，分别代表奇数行列偶数行列或指定行列 showImg(https://segmentfault.com/img/bVbeipJ?w=649&h=665); 此例子已经包含本文大部分内容，请对照参考。查...

sshe 2019-08-29 16:10 评论0 收藏0
【丛林】HTML Table 表格浅谈（边框、隔行变色

摘要：表格的一个单元格，一行中包含几对，一行中就有几列。。表格的头部的一个单元格，表格表头。表格标题属性表格边框的宽度。表格单元边界与单元内容之间的间距内边距。单元格之间的间距。可填写或任意数字，分别代表奇数行列偶数行列或指定行列 showImg(https://segmentfault.com/img/bVbeipJ?w=649&h=665); 此例子已经包含本文大部分内容，请对照参考。查...

szysky 2019-08-02 11:01 评论0 收藏0
浅谈padding

摘要：浅谈浅谈是盒子模型的一部分，代表盒子模型的内边距。可能的值可能的值值描述浏览器计算内边距规定以具体单位计的内边距值，比如像素厘米等。默认值是规定基于父元素的宽度的百分比的内边距规定应该从父元素继承内边距常用的写法是使用，比如。浅谈padding padding是CSS盒子模型的一部分，代表盒子模型的内边距。用法 padding属性有四个值，分别代表上、右、下、左的内边距。 .box { ...

iliyaku 2019-04-23 13:31 评论0 收藏0
浅谈高性能web前端技术栈——小白轻松做到减少HTTP请求

摘要：小白如何轻松写出高性能前端页面一从减少请求开始下面分别从以下几点开篇图片地图，，内联图片，样式表合并，脚本文件合并。操作原理通过合并图片减少请求，并且比图片地图更灵活，降低下载量，合并后图片比分离的图片总和要小。小白如何轻松写出高性能web前端页面一.从减少HTTP请求开始下面分别从以下几点开篇：图片地图，CSS Sprites，内联图片，样式表合并，脚本文件合并。 1.图片地图...

jayzou 2019-08-22 17:03 评论0 收藏0