css常用属性总结:背景background下篇
前言:这段时间天天加班到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下篇的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)
text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- css 02-CSS属性:背景属性
02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- css常用属性总结:背景background上篇
1.在前面一节中我们提到了color的使用,类似于前景色,我们同样可以为元素的背景声明颜色,可以使用background-color属性, 它接受任何有效的颜色值.先看看它的语法. backgroun ...
- css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...
随机推荐
- vscode golang插件下载
此处是windows,linux操作类似 进行如下命令进行目录切换:cd %GOPATH%\src\github.com\golang我这里的GOPATH是在D:\go_project如果src目录下 ...
- 《Java程序设计》十四次作业
<Java程序设计>十四次作业实验总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 3. 代码量统计 周次 总代码量 新增代码量 总文件数 新增 ...
- java基础第6天
面向对象 当需求单一,或者简单时,我们一步一步去操作没问题,并且效率也挺高.可随着需求的更改,功能的增多,发现需要面对每一个步骤很麻烦了,这时就开始改进,能不能把这些步骤和功能再进行封装,封装时根据不 ...
- 微信授权登录,关于调不起授权页面,无法响应回调方法,获取不到code 详解
前期准备工作:申请AppId,下载资源包jar.文档等. 微信授权登录步骤: 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据c ...
- 利用xpath来解析douban电影相对应的信息
from lxml import etree import requests url = "https://movie.douban.com/chart" headers = {& ...
- LTE-Advanced(4G)主要技术学习:CA、CoMp、HetNet
CA:Carrier Aggregation,载波聚合 从LTE到LTE-Advanced演进过程中,更宽频谱的需求是影响演进的最重要因素,为此3GPP标准提出了载波聚合技术.简单地说,它可以将多个载 ...
- 1028:Ignatius and the Princess III
本题应该有两种方法: 1.母函数法 2.递推法 母函数不了解,待充分了解之后,再进行补充! 这里为递推实现的方法: 思路: 定义:n为要拆分的整数: k为拆分的项数: f[n][k]代表 n的整数拆分 ...
- JavaScript异步编程__“回调地狱”的一些解决方案
异步编程在JavaScript中非常重要.过多的异步编程也带了回调嵌套的问题,本文会提供一些解决“回调地狱”的方法. setTimeout(function () { console.log('延时触 ...
- 转-Vue.js2.0从入门到放弃---入门实例(一)
http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 ...
- 利用OCR文字识别+百度算法搜索,玩转冲顶大会、百万英雄、芝士超人等答题赢奖金游戏
[先上一张效果图]: 一.原理: 其实原理很简单: 1.手机投屏到电脑: 2.截取投屏画面的题目部分,进行识别,得到题目和三个答案: 3.将答案按照一定的算法,进行搜索,得出推荐答案: 4.添加了一些 ...