一天搞定CSS：背景background--03
背景分为—背景颜色和背景图片
1.背景属性
2.背景颜色
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
border: 10px solid red;
/*背景颜色三种表示方法:颜色的单词,rgb,16进制*/
background-color:green;
background-color: rgb(0,0,0);
background-color:#008800;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3.背景图片
背景图片有：位置 重复性
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
border: 10px solid red;
/*背景图片*/
background-image:url(images/img.jpg);
/*背景图片是否重复：repeat
* repeat-x横向重复
* repeat-y纵向重复
* no-repeat不重复
* */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
/*
background-position:x y; 背景图片的位置
传数值：（背景图片离左上角的距离）
x:
正值 从容器的左边往右边走的距离
负值 从容器的左边往左边走的距离
y:
正值 从容器的上边往下边走的距离
负值 从容器的上边往上边走的距离
传关键字
x:
left 图片在容器的左边
center 图片在容器X轴的中心
right 图片在容器的右边
y:
top 图片在容器的上边
center 图片在容器Y轴的中心
bottom 图片在容器的下边
* */
background-position: 5px 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
一天搞定CSS：背景background--03的更多相关文章
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- CSS背景background图片
一.CSS背景background图片 - TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...
- CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
- CSS 背景 background 讲解
背景语法:background: background-color || background-image || background-repeat || background-attachment ...
- css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- 十分钟搞定CSS选择器
在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...
- (转)十分钟搞定CSS选择器
原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...
随机推荐
- NOIP2001T4car的旅行计划
洛谷传送门 一看数据就是floyed(毕竟年代久远),然而建图不是那么好贱好建,只知道三个机场,需要判断斜边来求第4个机场坐标. 往后一些麻烦的建图. 最后floyed就好. --代码 #includ ...
- 【C和指针】笔记1
数据 基本数据类型 整型家族:包含字符,短整型,整型和长整型 整型相互之间大小规定如下: 长整型至少和整型一样长,而整型至少应该和短整型一样长. short int至少16位,long int至少32 ...
- 使用JSONObject生成和解析json
1. json数据类型 类型 描述 Number 数字型 String 字符串型 Boolean 布尔型 Array 数组,以"[]"括起来 Object 对象,类似于C中的结构体 ...
- 【解决问题】解决python安装模块时UnicodeDecodeError
安装模块时,出现报错: UnicodeDecodeError: 'ascii' codec can't decode byte 0xcb in position 68: ordinal not in ...
- 学习《ASP.NET MVC5高级编程》——基架
基架--代码生成的模板.我姑且这么去定义它,在我学习微软向编程之前从未听说过,比如php代码,大部分情况下是我用vim去手写而成,重复使用的代码需要复制粘贴,即使后来我在使用eclipse这样的IDE ...
- windows下安装Redis并部署成服务
windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...
- linux服务器下安装node
在百度上搜了好久,都没有完整的答案,好多都已经过时了!特留下此脚印 # 检查是否已经安装pythonrpm -qa | grep python# 查版本python# 最好是重新安装 Python推荐 ...
- Hadoop技术在商业智能BI中的应用
Hadoop是个很流行的分布式计算解决方案,是Apache的一个开源项目名称,核心部分包括HDFS及MapReduce.其中,HDFS是分布式文件系统,MapReduce是分布式计算引擎.时至今日,H ...
- openresty源码剖析——lua代码的执行
上一篇文章中我们讨论了openresty是如何加载lua代码的 那么加载完成之后的lua代码又是如何执行的呢 ##代码的执行 在init_by_lua等阶段 openresty是在主协程中通过lu ...
- pdf.js实现在HTML下直接浏览pdf文档，无需插件即可实现
近期,有一个朋友做B端,服务器存了大量的金融类数据,很多都是pdf文档,他现在的做法是,先将pdf文档转换成flash,再放到浏览器上给用户浏览,但是他告诉我,这种体验太差了,而且很好资源,空间已经快 ...