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. Linq to xml 操作带命名空间的xml

    昨天需要操作用代码操作csproj文件,实现不同vs版本的切换. 在用XElement读取了csproj文件以后怎么也获取不到想要的对象. 反反复复试验了好多次都不得要领:先看下csproj文件的内容 ...

  2. 008.在C#中,显式接口VS隐式接口

    原文http://www.codeproject.com/Articles/1000374/Explicit-Interface-VS-Implicit-Interface-in-Csharp (At ...

  3. MSSQL存储过程实现拼接sql的注意点

    这里我昨天碰到的问题就是执行一段根据变量tableName对不同的表进行字段状态的更改.由于服务器原因,我不能直接在数据访问层写SQL,所以只好抽离出来放到存储过程里面. 这里就出现了一个问题,我花费 ...

  4. C#基础笔记(第十三天)

    1.复习泛型集合List<T>Dictionary<Tkey,Tvalue>装箱和拆箱装箱:把值类型转换为引用类型拆箱:把引用类型转换为值类型 我们应该尽量避免在代码中发生装箱 ...

  5. SpringBoot(四) Core Features: Logging

    参考 文档: 26. Logging

  6. eclipse启动项目报错:java.lang.ClassNotFoundException: ContextLoaderListener

    eclipse 启动项目报错:找不到 Spring 监听器类 org.springframework.web.context.ContextLoaderListener 严重: Error confi ...

  7. Tomcat9 配置在Windows7 64位 上安装步骤

    安装 Tomcat 之前先安装java JDK . 本人在安装Tomcat之前,java的jdk安装的是jdk 11版本.安装java 网上教程一大把,我这里不再阐述. 百度直接搜 Tomcat,如下 ...

  8. 解决:java 读取 resources 下面的 json 文件

    前言:java 读取 工程下的配置文件,文件类型为 json(*.json),记录一下始终读取不到 json 文件的坑.maven项目 直接上工具类代码 package com.yule.compon ...

  9. SpringMVC入门(二)—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器

    一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...

  10. Vue.js 的一些小技巧

    给 props 属性设置多个类型 这个技巧在开发组件的时候用的较多,为了更大的容错性考虑,同时代码也更加人性化: export default { props: { width: { type: [S ...