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. [转] Linux Daemon Writing HOWTO

    Linux Daemon Writing HOWTO Devin Watson v1.0, May 2004 This document shows how to write a daemon in ...

  2. SQL、Linq和Lambda表达式 的关系

    首先说说这三者完全是三种不同的东西,SQL是结构化查询语言(Structured Query Language)简称,这大家再熟悉不过了,下面主要介绍LINQ和Lambda表达式的基本概念以及同一查询 ...

  3. JS中的事件冒泡——总结

    一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...

  4. 骆驼拼写法(CamelCase)

    在英语中,依靠单词的大小写拼写复合词的做法,叫做"骆驼拼写法"(CamelCase).比如,backColor这个复合词,color的第一个字母采用大写. 这种拼写法在正规的英语中 ...

  5. 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number o ...

  6. fzu 2163

    Problem 2163 多米诺骨牌 Accept: 17    Submit: 50Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem ...

  7. js静态数据分页展示

    拿vue做示例 首先定义data data() { return { tableData: [], // 当前页的数据,用于给表格展示用的 tableDataAll: [], // 需要拿来分页的总数 ...

  8. nginx正确服务react-router应用

    如今React应用普遍使用react-router作为路由管理,在开发端webpack自带的express服务器下运行和测试表现均正常,部署到线上的nginx服务器后,还需要对该应用在nginx的配置 ...

  9. Math.random理解练习

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)

      概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间总结一下是值得的! 本文内容脑图如下: top 命令 top 命令我想大家都挺熟悉吧! ...