css颜色

css实现背景图拉伸

限于喜欢 提交于 2020-01-11 10:29:14
制作页面时,有时需要在表格内插入背景图,我们可以使用CSS进行控制,代码: style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;" 其中,./images/counter_bg.jpg为显示图片路径。 如果现在需要实现背景图随表格拉伸而不重复的拉伸填充,如何实现? 制作方法: 建立表格,并在<table>中插入CSS的一种滤镜,代码: style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')" 不过此方法仅支持Ie,并且在ie6中还存在一个问题,就是背景上方的超链接等元素会失效,暂时未找到好的解决方案。如果谁找到了,请留言。 另外,如果需要其他更复杂的效果,建议用层来实现了,利用层的z-index属性,来实现,几乎是无所不能啊。例子: 使用层实现的flash背景 <div style="position:relative"> <EMBED style="position:absolute;z-index:0" src="http://www.68design.net/art

CSS背景设置

自作多情 提交于 2020-01-10 19:53:10
写在中,在 下面。 div{ width: 1000px; height: 1000px; / 背景颜色 : 十六进制,颜色名,rgb,rgba / /* background-color: rgba(255, 0, 0,0.5); / / 背景图片 / / background-image: url(“image/小红01.jpg”); / / 背景平铺:默认repeat,全重复 / / background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; background-repeat: repeat; / / 背景大小 / / x,y 可以写像素,可以写背景百分比。 如果想直接拉伸可以直接写cover。 / / background-size: 100px,100px; / / 背景定位 / / background-position: 100px,100px; / / 复合写法 / / background 颜色,图片,定位,平铺 / / background: coral url(“image/小红01.jpg”) repeat-x; */ / 颜色渐变 / background: -webkit-linear-gradient(top,white,yellow

less 学习笔记

拟墨画扇 提交于 2020-01-09 09:36:00
一、介绍 Less (Leaner Style Sheets 简洁的样式表) 是一门向后兼容的 CSS 预处理语言 ,它扩展了CSS 语言。 less is more. 好处: 1、具有部分编程语言的功能,提高编码效率 2、提供模块化 3、结构清晰、易于拓展 4、完全兼容 css 缺点: 1、学习成本提高了些 2、让调试变的复杂起来(但其实有办法解决,不赘述了) 几种 css 预处理语言的诞生先后顺序: Sass 诞生于 2007 年,Ruby 编写,其语法功能都十分全面,可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎,并且它的项目团队很是强大,是一款十分优秀的预处理语言。 Less 诞生于 2009 年, 受 Sass 的影响 创建的一个开源项目。 它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年,来自 Node.js 社区,语法功能也和 Sass 不相伯仲,是一门十分独特的创新型语言。 二、安装 & 使用 less 即可在客户端运行,也可在服务器端运行。 1、在 Node.js 环境 : npm install -g less > lessc styles.less styles.css 2、在浏览器环境 : <link rel="stylesheet

css背景

让人想犯罪 __ 提交于 2020-01-09 03:19:44
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写(复合属性) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法: background-image : none | url (url) 参数: none :  无背景图(默认的) url :  使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。 小技巧: 我们提倡 背景图片后面的地址,url不要加引号。 背景平铺(repeat) 语法: background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数: repeat :  背景图像在纵向和横向上平铺(默认的) no-repeat :

CSS知识点集锦

梦想的初衷 提交于 2020-01-08 10:21:24
CSS知识点集锦 CreateTime--2016年9月29日09:43:10 Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题   正常情况下,外部样式 < 行内样式 < 内部样式(由低到高), "!important"可以打破这种优先级顺序,如果CSS样式,被"!important"修饰,则被其修饰的样式具有最高优先级,即: 外部样式 < 行内样式 < 内部样式 < 被"!important"修饰的样式(由低到高)。   举例1: /*外部样式*/ div{background-color: yellow !important;} /*内部样式*/ div{background-color: green;} /*行内样式*/ <div style="background-color: blue;">测试CSS样式优先级</div>   结果:div背景色为黄色   注意: 如果行内样式同样被"!important"修饰,则优先级遵循正常情况! 1.背景色线性渐变 background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/ UpdateTime--2016年10月25日11:37:53 UpdateTime-

Bootstrap字符图标——Icon Font

僤鯓⒐⒋嵵緔 提交于 2020-01-08 06:31:43
bootstrap3.x开始使用字符图标方法,字符图标的好处很多,具体可以参见该网站 http://www.leemunroe.com/icon-fonts/ 。总结起来就是: 1.图标可以完全通过css来控制(颜色、变形、阴影等)。 2.不用图片精灵工具,也不用老打开ps调整图标。最主要的是不用算像素然后css定位,确实可以节省很多功夫。 解压最新bootstrap3.0.3版本文件,可得到css,fonts和js三个文件。fonts里提供针对不同浏览器的四种字体文件,css中则使用css3技术调用该字体文件应用到网页中。当然同样是和glyphicons-halflings合作的。 I've been using icon fonts for a few projects lately instead of graphical icons. There are several advantages to using icon fonts. Scale them with CSS Color them with CSS Add shadows with CSS Change opacity with CSS Rotate with CSS Basically make any changes without opening Photoshop and editing a

CSS

[亡魂溺海] 提交于 2020-01-07 20:14:52
================转载 https://www.cnblogs.com/yuanchenqi/articles/5977825.html ============== 一、什么是CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现和数据内容分离; 二、css的四种引入方式 1、行内式   行内式是在标记的style属性中设定CSS样式。这种方式没有体现出css的优势; <p style="background-color: rebeccapurple">hello yuan</p> 2、嵌入式   嵌入式是将CSS样式集中卸载网页的<head></head>标签对的<style></style>标签中; <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式   将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4、导入式   将一个独立的.css文件引入到HTML文件中,导入式使用CSS规则引入外部CSS文件,

web前端入门到实战:css中颜色

北战南征 提交于 2020-01-06 22:36:10
颜色 如果我们相给页面设置颜色可以采用多种方法进行设置: 一、命名颜色 假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。 命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色,紫红色,灰色,橙色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色。 有的时候也许使用其他颜色值,并不在标准颜色之内的颜色也可以使用,它之所以能起作用,原因是大多数的web浏览器能识别多达140个颜色,包括前面说的17种颜色。 (二)、RGB指定颜色 计算机通过组合不同的红色、蓝色、绿色分量来创造颜色。这种组合通常被称为RGB颜色。可以直接访问这些颜色,通过调整红、绿、蓝分量来最大限度的控制颜色。所有浏览器都支持 RGB 颜色值。 RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是整数三元组表示法:参数介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。 百分数记法:分别指定白色和黑色,值将指定为: rgb(100%,100%,100%) rgb(0%,0%,0%) 整数三元组记法,相同的颜色表示如下 rgb(255,255,255) rgb(0,0,0) 专门建立的学习Q-q-u-n ⑦⑧④

web前端入门到实战:CSS背景background

随声附和 提交于 2020-01-04 19:24:49
1、背景颜色 background-color 取值:合法的颜色值和transparent 注:背景颜色和背景图片,填充都是从边框开始 2、背景图片 background-image:url(图片路径) 3、背景图平铺 background-repeat: 取值: repeat:平铺 no-repeat:不平铺 repeat-x:水平方向平铺 repeat-y:垂直方向平铺 4、背景图定位 background-posion:x y,设定的值都是相对于浏览器,不是相对于容器 取值: (1):x,y都是以px为单位的数字 +:右,下 -:左上 (2)x% y% (3)关键字 x:left/center/right y:top/center/bottom 5、背景图片的尺寸 background-size:x y 取值: (1)x y以px为单位的数字 (2)x% y% 相对原图的%比 (3)cover:容器被图片100%覆盖,哪怕图片显示不全,也要把容器覆盖 (4)contain:容器要把图片100%包含起来,哪怕图片缩小到看不到,也要把整张图片都包含住 专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划) 6、背景图固定 将背景图固定在网页某个位置

CSS

前提是你 提交于 2020-01-04 11:18:41
1 CSS基础 1.1 什么是CSS CSS: 层叠样式表, 是用于美化、渲染网页的一门语言。 使用css美化网页,可以实现将展示数据的html代码和设置样式的css代码进分离,增强了网页的展示能力。 1.2 在HTML中引入CSS 1.2.1 通过style属性设置样式 在标签上添加一个style属性可以为当前标签快速添加css样式 例如: 这种方式不推荐大量使用:(1)设置在当前标签上的样式只对当前标签起作用,代码无法复用 (2)可读性太差, 后期难以维护, 也容易造成页面结构的混乱! 1.2.2 通过style标签设置样式 在head标签内部添加一个style标签,在style标签内部可以选中元素,对元素进行样式设置。 示例: 这种方式将所有的css样式集中在一个style标签内部统一进行管理,实现了代码的复用。 1.2.3 通过link标签引入css文件 在html中 在demo.css中 这种方式是将所有的css样式集中在一个单独css文件中统一进行管理: (1)真正实现了html代码和css代码的分离。 (2)实现了代码的复用。 推荐使用这种方式。 1.3 CSS选择器 1.3.1 元素名、标签名选择器 通过元素的名称选中指定名称的元素 格式:元素名{ css样式… } 示例: 1.3.2 类(class)选择器 可以在标签上添加一个class属性,为标签设置所属的类