一天搞定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新增的不太熟悉,在此总结一下 ...
随机推荐
- Python -堆的实现
最小(大)堆是按完全二叉树的排序顺序的方式排布堆中元素的,并且满足:ai >a(2i+1) and ai>a(2i+2)( ai <a(2i+1) and ai<a(2 ...
- CentOS 'mysql/mysql.h': No such file or directory
需要安装mysql-devel # yum install mysql-devel
- 【代码学习】PHP中GD库的使用
PHP--GD库 ================================================ 一.支持: 需要php支持GD库 二.作用: 验证码.水印.缩放等 三.绘画步骤: ...
- Angular简易分页设计(一)：基本功能实现
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ...
- OSI七层模型学习笔记
1.简介 什么是OSI模型呢? OSI模型全名Open System InterConnect 即开放式系统互联,是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架, ...
- 使用 Laravel 实现微型博客系统
参考链接:An Introduction to Laravel Authorization Gates 这个微型博客系统包含两个用户角色(作者 和 编辑),它们的权限如下: 作者能创建博客 作者能更新 ...
- maven命令更新子父项目的pom版本
Q:一个maven项目,有多个子module,在顶级父pom.xml里设置<version>1.0.0-SHAPSHOT</version>,在子pom.xml里都用了 < ...
- zoj3204 Connect them 最小生成树
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3367 题目就是简单的最小生成树的模板的应用,不过最小生成树可能不唯一 ...
- Redis开启远程登录连接。
今天使用jedis客户端api连接远程连接redis的时候,一直报错,如下: redis.clients.jedis.exceptions.JedisConnectionException: java ...
- 每天一道Java题[2]
问题 可以直接根据hashCode()方法产生的值判断两个对象是否相等吗? 解答 不能!根据Wikipedia(https://en.wikipedia.org/wiki/Java_hashCode( ...