CSS background汇总

本文更新版本 ,请跳转所有背景属性都不能继承. 1. background-color 所有元素都能设置背景颜色. background-color的默认值是transparent:也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见. 2. background-image 所有元素都能设置背景图像: 背景图像可以设置多个,中间用逗号隔开:背景图像会层叠,写在前面的层次在上面. 3. background-repeat repeat(默认…

转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

[总结]浏览器CSS Hacks汇总浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则.实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks.Attribute Hacks).对此根据一些资料汇总了一些CSS Hacks方法. 1.条件样式表像这样的代码你应该见过: <link rel="styleshe…

CSS 高级技巧汇总

在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素…… //* remove border */ .nav li:last-child { border-r…

css优先级汇总

原文:css优先级汇总我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴.优先级的顺序为内联样式>内部样式>外部样式. <head> <link href="style.css" rel="stylesheet" type="text/css" /> /*.color{color:re…

CSS 技巧汇总

CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)＝伪类选择符(:hover )＝属性选择符([attr] )>类型选择符(标签)＝伪元素选择符(:first-child) sticky 定位问题 sticky 定位的元素受父级块级元素影响,其宽度继承的是父级的宽度,另外其只能显示在父级的内容区,当滚动距离超过其父级的高度时,即超过内容区后,其也会相应得被推出可视区域,使用时要注意.注:sticky 元素的父级…

CSS hack 汇总

1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![endif]--> <!]> IE7以及IE7以下版本可识别 <![endif]--> <!]> IE7以及IE7以上版本可识别 <![endif]--> 只在IE下生效 <!--[if IE]> 这段文字只在IE浏览器上显示 <![end…

CSS 背景-CSS background

这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || background-attachment || background-…

CSS background 属性总结

CSS background 属性总结…

HTML CSS——background的认识（一）

今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color-hex.transparent: 2.background-image:设置元素的背景图像.其值能够为:url(URL).none: 3.background-repeat:设置元素背景图像是否反复以及反复时的反复方式.其值能够为:repeat.repeat-x.repeat-y.no-repeat…

css background之设置图片为背景技巧

css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那些值(可进入CSS手册的background详细了解) 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 background-repeat…

CSS background 之设置图片为背景技巧

首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片background-repeat 背景重复background-attachment 背景图片是固定还是滚动background-position 背景图片的定位接下来我们重点来讲解css background通常的使用方法首先我们来看下面一段代码background:url(bgimg.gif) no-…

CSS background 属性详解

CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to sep…

[CSS3] CSS Background Images

Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; height: 100vh; } Body with elaborate background using only CSS background-image: url("img_tree.gif"), url("paper.gif"); Using CSS backgr…

css background之设置图片为背景技巧

原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那些值(可进入CSS手册的background详细了解) 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 background-repeat 背景重复 background-attachment 背…

css background transparent All In One

css background transparent All In One opacity ul { max-height: 100px; /* max-height: 187px; */ overflow-y: auto; position: relative; li:first-of-type { top: -1px; position: sticky; z-index: 666; opacity: 0; background: transparent; } } refs xgqfrms 2…

css & background & svg

css & background & svg https://developer.mozilla.org/en-US/docs/Web/CSS/background background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color https://css-tricks.c…

PHP全栈开发（八）：CSS Ⅲ background

设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色设置背景图片: body { background-image:url('image/bg1.gif'); } url后面跟的是背景图片的路径. 假如我们的背景图片是一个小方块,那么这个小方块默认情况下会沿着X轴和Y轴平铺过去. 但是有些图片是沿着Y轴渐变的,那么沿着Y轴平铺的话,会显得很怪异. 所以我们可以设置这个背景图片只沿着X轴平铺,…

12 个CSS 高级技巧汇总[转载]

使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px sol…

CSS background 属性

CSS 参考手册实例如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试一试浏览器支持 IE Firefox Chrome Safari Opera 支持支持支持支持支持所有浏览器都支持 background 属性. 注释:IE8 以及更早的浏览器不支持一个元素多个背景图像. 注释:IE7 以及更早的浏览器不支持 "inherit"…

CSS样式汇总

1. Overflow: 是否隐藏超出容器范围之外的内容,主要参数包括Hidden(隐藏),Auto(根据容器内容自动显示滚动条),scroll(显示滚动条,即使内容不超出容器范围,也会显示一个边框,效果非常不好): 2. Relative & Absulote Relative:将元素从文档流中部分不完全脱离出来,因为它先前的位置无法被其他元素所占据: Absolute:一个元素的Position被设定为Absolute后,而该元素的父级元素没有设置Position属性,则会一直往上找,如何可…

常用CSS Reset汇总

什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式.“覆盖”浏览器的CSS默认属性.最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset.(参考百度百科:Css Reset) 常用Css Reset(一):Eric Meyer’s “Reset CSS” 2.0 ;;…

CSS 选择器汇总

CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS 伪类 CSS 伪元素一,CSS 元素选择器最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可以是 html 本身: html {color:black;} h1 {co…

Css background缩写

例子: background:url(../images20130624/bg.png) no-repeat -1424px -5px; 官方API Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit Initial: see…

[CSS]background背景

css背景样式序号中文说明标记语法 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url('imgpath/img.png')|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {background-attachment:fixed|scroll} 5 背景定位 {backgr…

12 个 CSS 高级技巧汇总

下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li…

12个CSS高级技巧汇总

1.使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px solid #666; } 然后再除去最后一个元素…… //* remove border */ .nav li:last-child { border-right: none; } 可以直接使用 :not() 伪类来应用元素: .nav li:not(:last-child) { border-…

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引起,padding的上下值对li有影响,左右无影响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引起的,就设置ul的显示形…

CSS知识点汇总 (全是干货O(∩_∩)O~ )

一.CSS选择器 [选择器的命名规则] 1.只能有字母数字下划线组成,不能有其他任何特殊字符 2.开头不能是数字 [通用选择器]1.写法:*{}2.作用:选中页面中的所有标签(大范围修改)3.优先级:最低,,低于所有选择器 eg:{ font-size: 20px; } [标签选择器]1.写法:HTML标签名{样式属性:样式属性值;....}2.作用:选中页面中所有的对应标签 eg: li{ color: red; }[类选择器class选择器]1.写法:.选择器名称{}调用:在需要改变样式的标…

20 个 CSS 高级技巧汇总

原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: g…

好程序员web前端分享12个CSS高级技巧汇总

好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 <p><font…

【CSS background汇总】的更多相关文章