HTML复习(19.背景样式)
重点
掌握背景颜色属性
掌握背景图片属性
背景样式简介
在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.背景样式)的更多相关文章
- android 控件在不同状态下的内容样式与背景样式
1 控件内容(如字体颜色)在不同状态下有不同的表现色ref:http://developer.android.com/guide/topics/resources/color-list-resourc ...
- CSS3初学篇章_5(背景样式/列表样式/过渡动画)
背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...
- style里的文字 背景 样式以及边框
<style> body{background:#FCC;} .c00 div{ margin:0 auto; padding:0;} #a01{ ...
- CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip
(一)常用的字体属性: font-weight: 属性值100-900 400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...
- CSS设置边框、符号、背景样式、链接属性
一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...
- css文本背景样式
文本样式 文本类 text-transform:uppercase: 全部变为大写 text-transform:lowercase: 全部变为小写 text-transform:capitalize ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
- CSS中如何使用背景样式属性,看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
- H5C3--background中cover,背景样式,提升响应区域+精灵图的使用
一.cover的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- webpack的加载器兼容配置一览
"devDependencies": { "css-loader": "^3.2.1", "file-loader": ...
- 关于WPF的圆角
失败案例 <Border CornerRadius="3" Width="100" Height="100"> <Stac ...
- 【git】git基本使用以及设置
视频讲解 一.git下载 官网:Git - Downloads (git-scm.com) 国内镜像:CNPM Binaries Mirror (npmmirror.com) 就目前而言,github ...
- debian安装mate桌面环境的方法(图)
debian安装mate桌面环境的方法(图) 2018年11月11日 | 浏览: 5199 | 来源:www.yangshengliang.com debian安装时是可以选择桌面环 ...
- 230222 Radiated Immunity Pre-compliance Test
Hello everyone, welcome to Mach1 Design EMC channel. Last time we talked about how to set up a radia ...
- 云计算——实验3:AWS实验-EC2操作
本次实验属于验证型实验,通过本次实验学生将掌握以下内容: 1.EC2免费实例创建方法: 2.EC2实例SSH连接以及命令使用. 我使用阿里云进行注册和远程连接,aws需要使用信用卡,国内的比较省事. ...
- jmeter测试工具安装篇
安装jmeter之前需要安装Java环境 window系统安装java 下载jdk 安装前我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwo ...
- JS基础笔记汇总
JS基础笔记最全的汇总 javascript介绍以及起源目录1.变量和常量的知识2.基本数据类型3.运算符4.基本数据类型间的转换5.流程控制语句 一.javascript介绍以及起源 js一种直译型 ...
- vim多视窗操作
命令行模式下输入:sp 1.txt 打开新的水平分屏视窗来编辑1.txt 命令行模式下输入:vsp 2.txt 打开新的垂直分屏视窗来编辑2.txt 普通模式下Ctrl+w s 将当前窗口分割成两个水 ...
- PGI 用户手册之 Site-Specific Customization of the Compilers
翻译自PGI Compiler User's Guide 1.6. 使用PGI编译器进行并行编程 PGI编译器支持多种样式的并行编程: 使用pgf77,pgf95,pgfortran,pgcc或pgc ...