一天搞定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新增的不太熟悉,在此总结一下 ...
随机推荐
- 大话PROFINET
1.PROFINET是什么? PROFINET的全称是Process Field Net,是由PROFIBUS国际组织PI(PROFIBUS International)推的出,在IEC61158标准 ...
- Let's Encrypt: 为CentOS/RHEL 7下的nginx安装https支持-具体案例
环境说明: centos 7 nginx 1.10.2 前期准备 软件安装 yum install -y epel-release yum install -y certbot 创建目录及链接 方法1 ...
- html运用以及工具
对于这个教程,我建议你只使用最简单的工具.例如:Notepad(在windows里),TextEdit(在Mac上)或是KEdit(在KDE里)就可以了.一旦你了解这个原理,你就会想要切换到更高级的工 ...
- list、set、map区别
list是有序且重复的; list中的数据都是按照写入的顺序排列的,存入list的数据用add方法写入; list可以用循环遍历list以达到获取全部数据的目的,同时也可以通过下标get(index) ...
- sass学习入门篇（三）
这章我们讲“嵌套”,嵌套包括两种:一,选择器嵌套.二是属性的嵌套.一般用选择器嵌套居多 一,选择器嵌套:指的是在一个选择器中嵌套另一个选择器来实现继承.使用&表示父元素选择器 li{ floa ...
- fileInput实战总结
fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...
- unity游戏设计之背包系统
这次任务是模仿上图的样子,制作一个类似的背包系统. 上面的链接为:http://www.tasharen.com/ngui/exampleX.html 我们的目标是: 1.实现背包系统的UI界面 2. ...
- lightoj1281快速幂+数学知识
https://vjudge.net/contest/70017#problem/E 后半部分快速幂就能求出来,要注意03lld不然001是输出错误为1.前半部分用log10() 对于给定的一个数n, ...
- Struts2之2.5.10.1HelloWorld
Struts2.5.10.1是目前为止最新的版本,struts2建议持续跟进,理由大家都懂.好了,下面步入正题. 基于struts2.5.10.1建立一个HelloWorld,基于注解的哈! 工具:e ...
- redis性能优化
redis日志截图: