前言:这段时间天天加班到10:30之后,简直是x了。

在上一篇文章中,分别解析了background各个属性的用法和注意细节。如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂。

body{background-color:#ccc;background-image:url(bg123.gif);background-repeat:no-repeat;background-position:50% 50%;}

这样就会得到自己想要的背景效果,但是如果每次都这么写,那就太坑爹了,其实background也是有简写的写法的。我们来看看简写的写法。
还是上面的效果,但是改成了:

body{background:#ccc url(bg123.gif) no-repeat 50% 50%;}

合并后的写法是不是很简洁,以前看过关于如何写出优雅的css代码相关的博文,其中有一条就是关于复合属性尽量使用简写。这里我就写一下关于自己的
使用心得:

1.使用background时,url()里面的路径不要用引号括起来,为什么勒?减小了css代码。

2.关于background的缺省值的细节。很多复合属性都有这一个现象。今天就先说说background的缺省值的问题。

body{background:#ccc url(bg123.gif) no-repeat 50% 50%;} body有了背景图像。如果在某些场景下需要用js来改变background的某些值时,于是写下代码

$('body').css('background','red'),一看效果,背景颜色是有了,但是背景图像没了,因为后面的属性覆盖了前面的属性声明。你得这么写

$('body').css('background-color','red'),这样就只是修改了背景颜色,其他的背景属性并没有被修改。这里算一个注意的地方吧。

文章写的不好,还请大家见谅。困了,累了,喝xxx!

css常用属性总结:背景background下篇的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  4. css常用属性汇总

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

  5. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  6. css 02-CSS属性:背景属性

    02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...

  7. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  8. css常用属性总结:背景background上篇

    1.在前面一节中我们提到了color的使用,类似于前景色,我们同样可以为元素的背景声明颜色,可以使用background-color属性, 它接受任何有效的颜色值.先看看它的语法. backgroun ...

  9. css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面

    1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...

随机推荐

  1. Python+Flask+MysqL的web建设技术过程

    一.前言(个人学期总结) 个人总结一下这学期对于Python+Flask+MysqL的web建设技术过程的学习体会,Flask小辣椒框架相对于其他框架而言,更加稳定,不会有莫名其妙的错误,容错性强,运 ...

  2. elasticsearch 自定义similarity 插件开发

    转自:http://www.chepoo.com/elasticsearch-similarity-custom-plug-in-development.html 在搜索开发中,我们要修改打分机制,就 ...

  3. 在JavaScript中进行文件处理,第四部分:对象URLs

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 学习到这里,你已经了解在传统方式中如何使用文件, ...

  4. websocket 缺点

    当时用 python 做的服务器,后来回去想再工作项目上用,但新的技术升级,随之而来还是要解决很多非技术问题, 服务器带宽,并发服务器性能方方面面考虑之后还是没有用上,十分可惜, 一个新的技术推动,尤 ...

  5. c++类成员函数重载常量与非常量版本时避免代码重复的一种方法

    c++有时候需要为类的某个成员函数重载常量与非常量的版本,定义常量版本是为了保证该函数可作用于常量类对象上,并防止函数改动对象内容.但有时两个版本的函数仅仅是在返回的类型不同,而在返回前做了大量相同的 ...

  6. 在webView 中使用JS 调用 Android / IOS的函数 Function

    最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...

  7. StringUtils的工具类isBlank与isEmply

    1. public static boolean isEmpty(String str)   判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0   下面是 S ...

  8. 深入理解java虚拟机,内存管理部分

    1,对象回收前会调用finalize()方法,尝试自救,只能调用一次 2,上面横向对比c++的析构函数,但是java有良好的内存管理,而且try/catch做得比较好 3,回收一个常量,1,对象的实例 ...

  9. java 题

    [程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 1.程序分析:   兔子的规律为数列1 ...

  10. 【转】纵表、横表互转的SQL

    纵表.横表互转的SQL 原文1:http://takkymj.iteye.com/blog/751401   横表就是普通的建表方式,如一个表结构为: 主键.字段1.字段2.字段3... 如果变成纵表 ...