background属性

  background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:

  a、background-color 设置背景色

  b、background-image 设置背景图片地址

  c、background-repeat 设置背景如何重复平铺

  d、background-position 设置背景图片的位置

  e、background-attachment 设置背景图片是固定还是随着滚动条滚动

实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这样做,这样性能更高,而且兼容性更好。

比如:background:#f00 url(bg.png)  no-repeat   left  center fixed

   background:#f00 url(bg.png)  no-repeat   10px  25px  fixed

前端页面开发流程

  a、创建页面项目目录。

  b、使用Photoshop对效果图切图,切出网页制作中需要的小图片。

  c、将装饰类图像合并,制作雪碧图。

  d、结合Photoshop和代码编辑器,参照效果图,进行html和css代码书写,制作页面。

css背景精华所在+前端页面开发流程的更多相关文章

  1. 前端页面开发,最低兼容IE 8的多设备跨平台问题解决!

    项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...

  2. vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03

    目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...

  3. CSS 背景图像 填充整个页面示例

    background-image 属性可以设置背景图像. 背景图像可以填充整个页面的,也可以填写一部分. background-image 属性的使用很简单:background-image:url( ...

  4. 我的前端页面开发js简易有效环境

    前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识.真正的快速有效开发,必须实现所谓所见即所得.在构建生产时,可能需要使用gulp/grunt等task ...

  5. flask实战-留言板-Web程序开发流程

    Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...

  6. X5的UI部分和传统Web页面开发的差异

    http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...

  7. 自适应 or 移动前端页面布局的问题?

    说出来,还请各位看官不要笑 - -.哥们至今不是很清楚页面的自适应和移动前端页面开发有什么区别 .有幸哪位看官清楚这些的话,希望能不吝赐教 .A.meta        <meta name=& ...

  8. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  9. 0016 CSS 背景:background

    目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...

随机推荐

  1. c#基础学习(0628)之使用进程打开指定的文件、模拟磁盘打开文件

    使用进程打开指定的文件 模拟磁盘打开文件 class Program { static void Main(string[] args) { while(true) { Console.WriteLi ...

  2. [javaSE] 单例设计模式

    四人帮设计了23中设计模式 单例设计模式:解决一个类在内存中只存在一个对象 构造函数私有化 在类中创建一个本类对象 提供一个方法可以获取该对象 class Single{ private static ...

  3. 【转】一次由过量线程引发的OOM排查

    mac的话,还得进行下特殊处理:右键mat显示包内容,进入Contents->MacOS下面,会有一个MemoryAnalyzer的命令. 打开终端,进入此路径找到MemoryAnalyzer, ...

  4. Sql Server 中使用日期遍历

    一个存储过程小案例,内容如下: declare @dt datetime set @dt='2016-01-01' while (@dt<='2016-12-31') begin -- 转换字符 ...

  5. WinForm窗体多线程操作实例

    最近在学习C# 多线程相关知识,这块一直比较薄弱,在网上查了一下资料,学习了一下前辈们的经验,小弟自己也比葫芦画瓢的写了一个,自学一下. 代码如下 using System; using System ...

  6. 容易忽略的小知识之 Date 函数参数

    Date 对象启用基本存储器并取得日期和时间. dateObj = new Date()dateObj = new Date(dateVal)dateObj = new Date(year, mont ...

  7. html--对URL传参数进行解析

    跳转页面需要传参数到另外一个html页面,跳转链接可写一个js的function function doView(articleId) { window.location.href ="co ...

  8. oracle profile 概要文件

    Profile文件概述: Profile是Oracle安全策略的一个组成部分,当Oracle建立数据库时,会自动建立名称为Default的Profile文件. 创建用户的时候,如果没有指定profil ...

  9. java实现Kafka的消费者示例

    使用java实现Kafka的消费者 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  10. 安装 jemalloc for mysql

    参考: MySQL bug:https://bugs.mysql.com/bug.php?id=83047&tdsourcetag=s_pcqq_aiomsg https://github.c ...