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. [转]使用EntityFramework6.1的DbCommandInterceptor拦截生成的SQL语句

    本文转自:http://www.cnblogs.com/Ax0ne/p/3620958.html 开始 EF6.1也出来不少日子了,6.1相比6.0有个很大的特点就是新增了System.Data.En ...

  2. Angular的表单组件

    创建表单元素 在上一节中,我们学习了如何创建一个组件login,现在将login改造一下, 在template中添加html表单元素,#usernameRef表示input元素id,如果想传递inpu ...

  3. C# 分页方法

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...

  4. VMWare开启DHCP和NAT服务(VMWare无法通过NAT上网以及和host主机通信的问题解决)

    最近在学习Hadoop,开始做一个集群.由于各个节点的IP地址需要保持不变,我决定在VMWare采用NAT的模式联网. 但是在安装Ubuntu系统的时候,提示我DHCP服务未开启. Your netw ...

  5. secureCRT的文件上传技巧

    现在我们经常会习惯性的使用windows系统,但现在开发项目和维护中经常都在使用linux服务器,以为它的性能更强.更精简. 学习大数据的同志们和维护后端的同志们,推荐一下secureCRT软件,用起 ...

  6. Q:链表的倒数第K个元素

    问题:如何得到链表中的倒数第k个元素?   一种简单的思路是遍历链表一遍,并统计出链表中节点的数目,然后计算出倒数第k个元素到链表头节点的元素的距离,然后得到对应的结果.但是,我们能否有一种更加简便的 ...

  7. 《JavaWeb从入门到改行》JDBC经典秘方QueryRunner

    目录: 基础篇_功能各自回顾 JDBC基础代码回顾(使用JdbcUtils工具简化) c3p0数据库连接池的使用(使用JdbcUtils工具简化) 大数据的插入(使用c3p0+JdbcUtils工具简 ...

  8. 移动端实现上拉加载更多(使用dropload.js vs js)

    做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...

  9. 爬虫必备—scrapy-redis(分布式爬虫)

    转载自:http://www.cnblogs.com/wupeiqi/articles/6912807.html scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单 ...

  10. Visualizing CNN Layer in Keras

    CNN 权重可视化 How convolutional neural networks see the world An exploration of convnet filters with Ker ...