重点

掌握背景颜色属性

掌握背景图片属性

背景样式简介

在CSS中,背景样式包括2个方面:①背景颜色;②背景图片。
在Web1.0时代,都是使用background或者bgcolor这两个“HTML属性”(不是CSS属性)来为元素定义背景颜色或背景图片。不过在Web2.0时代,对于元素的背景样式,我们都是使用CSS属性来实现。
背景颜色

在CSS中,我们可以使用background-color属性来定义元素的背景颜色。
color属性用于定义“文本颜色”,而background-color属性用于定义“背景颜色”

背景图片样式

在CSS中,我们可以使用background-image属性来为元素定义背景图片。
想要为一个元素定义背景图片,必须给该元素定义width和height。

背景图片重复
在CSS中,我们可以使用background-repeat属性来定义背景图片的重复方式。

背景图片位置
在CSS中,我们可以使用background-position属性来定义背景图片的位置。
想要定义背景图片的位置,需要同时设置水平方向和垂直方向的值。
在实际开发中,background-position一般用于实现CSS Spirit(精灵图片)

背景图片固定

在CSS中,我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
在实际开发中,background-attachment这个属性几乎用不上,了解一下即可。

HTML复习(19.背景样式)的更多相关文章

  1. android 控件在不同状态下的内容样式与背景样式

    1 控件内容(如字体颜色)在不同状态下有不同的表现色ref:http://developer.android.com/guide/topics/resources/color-list-resourc ...

  2. CSS3初学篇章_5(背景样式/列表样式/过渡动画)

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  3. style里的文字 背景 样式以及边框

    <style>        body{background:#FCC;}        .c00 div{ margin:0 auto; padding:0;}        #a01{ ...

  4. CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  5. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

  6. css文本背景样式

    文本样式 文本类 text-transform:uppercase: 全部变为大写 text-transform:lowercase: 全部变为小写 text-transform:capitalize ...

  7. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  8. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

  9. CSS中如何使用背景样式属性,看这篇文章就够用了

    css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...

  10. H5C3--background中cover,背景样式,提升响应区域+精灵图的使用

    一.cover的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. ElasticSearch (Es) 分组查询 记录

    首先表对应的实体类型: public class bm_info{ /// <summary> /// 单位 /// </summary> public  string sou ...

  2. [Notes-DS-1]时间复杂度的几个概念和计算方法

    ..加点字才算原创?

  3. mybatis判断是否为空或null

    <if test="catagoryCode != null and catagoryCode != ''"> AND train.CATAGORY_CODE = #{ ...

  4. Linux shell 获取路径、文件名、文件后缀

    以 make 文件为例: file=/usr/bin/make [root@CentOs7]# echo ${file%*/} /usr/bin/make [root@CentOs7]# echo $ ...

  5. PHP 静态延迟绑定 static

    PHP (self static parent 区别) self调用的方法和属性始终表示当前类的方法和属性 static调用的方法和属性为当前执行的类的方法和属性 parent调用的方法和属性为父类的 ...

  6. 用有限差分估计(Finite Difference Estimate)解决地理坐标与平面像素坐标转换过程的误差造成风场粒子向量失真问题

    下载NCEP的气象场grib2数据,风场是二维的向量,包含u和v两个分量.这个用经纬度投影到像素坐标会产生误差,直接绘制效果不太对:(   通过插值计算得到风场粒子的预测数据wind = interp ...

  7. watch监听中的deep以及immdiate

    1 deep:深度监听 使用场景:如果是监听的是对象类型,当手动修改对象的某个属性时,发现是无效的,此时需要给监听器添加deep:true. 例如: data:{ obj:{ a:1 } }, wat ...

  8. thirty-one

    动态组件 动态切换组件的显示和隐藏 如何实现动态组件的渲染 vue提供了有一个内置的<component>组件,专门用来实现动态组件的渲染.示例代码如下: 使用keep-alive保持状态 ...

  9. JVM系列(三):JVM内存结构和参数说明

    一.概述,内存结构图 二.堆Heap,存放对象实例,是垃圾回收的主要区域,非堆的内存不进行GC,GC会导致程序运行中断, 物理上可以不连续,堆空间不足时会产生OutOfMemoryException, ...

  10. Android studio java文件显示j爆红

    今天在android studio打开一个原来的工程,此工程是很久以前使用eclipse创建的,在android studio下有些问题需要解决. 1.设置project的jdk, 2.设置modul ...