背景图 | 易学教程

CSS的创建和样式

阅读更多关于 CSS的创建和样式

如何插入样式表（三种）外部样式表在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。不要在属性值与单位之间留有空格内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样: <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> 内联样式(要加双引号，且注意里面是否有空格，有的要加单引号) 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距： <p style="color: sienna; margin

CSS（03）背景

阅读更多关于 CSS（03）背景

CSS 背景属性用于定义HTML元素的背景。所有背景属性都不能继承。 background ：简写属性，作用是将背景属性设置在一个声明中。 background-color ：设置元素的背景颜色。 background-image ：把图像设置为背景。 background-repeat ：设置背景图像是否及如何重复。 background-attachment ：背景图像是否固定或者随着页面的其余部分滚动。 background-position ：设置背景图像的起始位置。一、背景颜色 background-color 属性定义了元素的背景颜色. CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" 页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} 尝试一下 » 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： p {background-color: gray; padding: 20px;} 如需查看本例的效果，可以亲自试一试！可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 background-color 默认值是 transparent

2.10、background属性

阅读更多关于 2.10、background属性

属性解释 background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项： background-color 设置背景颜色 background-image 设置背景图片地址 background-repeat 设置背景图片如何重复平铺 background-position 设置背景图片的位置 background-attachment 设置背景图片是固定还是随着页面滚动条滚动实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。举例：

CSS、JS中的相对路径引用

阅读更多关于 CSS、JS中的相对路径引用

　　初学者由于对一些比较基本的知识的把握不是很牢，所以在开发或者设计的时候，往往很容易出现一些错误或者异常现象而找不到出错的根源。记得自己刚刚java入门的时候，会出现一些很“离奇”的现象，然后一遍一遍查看自己的代码，一步一步的进行调试（当然那个时候的调试方式也只是从初学这的角度上而言的，大多是比较粗略的手段），还是发现不了哪里出了问题，这直接打击学习的积极性。甚至有时候，照着书本或者教学视频敲的实例代码也不能正常跑起来，不知道大家有没有这种悲催的感觉。　　比如说，大家在html中通常会导入一些外部的css、js文件，而其中一个比较容易被忽视的问题就是路径问题，有时候，我们在css、js中都有通过路径来引入一张图片的需求，当我们采用相对路径的时候，在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径，是以css文件所在路径为基准的，而js中的路径则是以导入此js的网页文件所在的位置为基准的。　　为了很好的说明这个问题，我们写一个简单的切换图片的js特效，刚开始的时候，我们让html有一副默认的背景图，通过css来设计，而当用户单击“切换背景图”按钮时，通过javascript代码来控制背景图的变更，效果如下：图一：更改背景图之前的效果图图二：更改背景图之后的效果图我们的文件结构是这样的： / index.html /js/ chbk.js /css

CSS学习(6)--背景属性

阅读更多关于 CSS学习(6)--背景属性

background 版本：CSS1　兼容性：IE4+ NS4+　继承性：无语法： background : background-color || background-image || background-repeat || background-attachment || background-position 参数：该属性是复合属性。说明：如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：transparent none repeat scroll 0% 0%。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。示例： 1 div { background : red no-repeat scroll 5% 60% ; } 2 body { background : url("images/aardvark.gif") repeat-y ; } 3 pre { background : url("images/aardvark.gif") top ; } 4 caption { background : fuchsia ; } background-attachment 版本：CSS1　兼容性：IE4+ NS6+　继承性：无语法： background-attachment :

CSS3-背景原点、背景裁剪

阅读更多关于 CSS3-背景原点、背景裁剪

background-origin 用于设置背景图像相对于什么位置来定位（背景图的起点）。语法： background-origin : padding-box|border-box|content-box ; 属性值作用 border-box 背景相对于元素边框来定位；从 border 区域（含border）开始显示背景图像 padding-box 背景相对于内边距来定位（默认）；从 padding 区域（含padding）开始显示背景图像 content-box 背景相对于内容来定位；从 content 区域开始显示背景图像相对于边框： CSS: div { width : 200px ; height : 200px ; padding : 20px ; margin : 10px ; background-color : skyblue ; border : 10px dashed gray ; background-image : url(images/bg.jpg) ; background-repeat : no-repeat ; /* 相对于边框定位 */ background-origin : border-box ; } HTML: < div > </ div > 相对于内边距： /* 相对于内边距定位 */ background-origin :

CSS background-color 、image 背景图片

阅读更多关于 CSS background-color 、image 背景图片

背景颜色 background-color 语法： background-color ： <color> 默认值： transparent 透明适用于：所有元素继承性：无动画性：是计算值：指定值取值： <color> ：指定颜色。说明：设置或检索对象的背景颜色。当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。对应的脚本特性为 backgroundColor 。背景图片 background-image 语法： background-image ： <bg-image> [ , <bg-image> ]* <bg-image> = <image> | none 默认值： none 适用于：所有元素继承性：无动画性：否计算值：指定值取值： none：无背景图。 <image> ：使用绝对或相对地址指或者创建渐变色来确定图像。说明：设置或检索对象的背景图像。如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。

OpenCV基础--以图像融合为例

阅读更多关于 OpenCV基础--以图像融合为例

文章目录 @[toc] 安装图像读取三通道读取BGR 四通道读取BGRA 图像大小图像保存为三通道图像添加alpha通道, 设置为不透明通道切分 alpha通道生成通道合成图像缩放 interpolation插值方法反向变换公式 INTER_NEAREST最近邻插值 INTER_LINEAR双线性插值 INTER_AREA 图像融合局部融合微信公众号二维码安装 pip install opencv-python 图像读取三通道读取BGR img_jpg = cv2.imread(path+"bg.jpg") 四通道读取BGRA img_png = cv2.imread(path+"bg.png",cv2.IMREAD_UNCHANGED) 图像大小 # 输出: 高，宽，通道数 img_jpg.shape # -> (1280, 720, 3) img_png.shape # -> (1280, 720, 4) 图像保存 # cv2.imwrite(filename, img) cv2.imwrite("bg.jpg", img_jpg) 为三通道图像添加alpha通道, 设置为不透明通道切分 b_channel, g_channel, r_channel = cv2.split(img_jpg) b_channel, g_channel, r

background-size属性

阅读更多关于 background-size属性

background-size属性 length length值，指定背景图片大小，不能为负值。 percentage percentage 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由 background-origin 设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果 attachment 为 fixed ，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。 auto auto以背景图片的比例缩放背景图片。 cover cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反， cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。 contain contain 缩放背景图片以完全装入背景区，可能背景区部分空白。 contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。 100% 单独设置一个100% 则保持原来比例，放大或缩小背景图到盒子宽度

css设置 '默认' background背景图

阅读更多关于 css设置 '默认' background背景图

css设置 '默认' background背景图有时需要给容器设置一个默认背景图片比如需求：服务器上的背景图文件不一定存在，存在的话显示服务器上的图片，不存在的话则显示‘’默认‘’背景图（补位图片）写法： background: url("需要显示的图片/jpp"),url("默认图片.jpg"); 如何工作？会优先加载显示第一个背景图片，加载失败的话则加载显示第二张图片来源： CSDN 作者：楠辞琦咎链接： https://blog.csdn.net/qq_34995862/article/details/104008651

订阅背景图