一天搞定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新增的不太熟悉,在此总结一下 ...
随机推荐
- IOS 程序运行过程
第一次写有点小紧张 希望大家多多指教! 主要讲讲程序从点击运行到结束这个过程中后面的代码都有哪些变化. 首先先了解一下UIApplication.UIApplication的核心作用是提供IOS运行 ...
- (转载)Google的PageRank算法
本文由张洋(敲代码的张洋)投稿于伯乐在线. 本文转载于:http://blog.jobbole.com/23286/ 很早就对Google的PageRank算法很感兴趣,但一直没有深究,只有个轮廓性的 ...
- rapidPHP 下载并安装
安装 rapidPHP对运行环境的要求 php 5.4以上,包括5.4,支持php7,依赖包,php-curl,php-mysql,php-gd 官网下载 http://rapidphp.gx521. ...
- windows的bat脚本
一个小小的设置固定ip和关闭防火墙的脚本: @echo //-=-=-=-=-=-=-=-=-=-=-=-=-=-=@echo // [固定设置]@echo // 设置IP,子网掩码,网关@echo ...
- Java中遍历Map的常用方法
以下方法适用于任何map实现(HashMap, TreeMap, LinkedHashMap, Hashtable, 等等): 方式一(推荐): // 推荐 // 在for-each循环中使用entr ...
- Python中使用Mysql（安装篇）
准备工作 import MySQLdb Linux系统自带了Python,但并不是都有这个包,至少我每次拿到一台全新的服务器时候,都发现没有装这个包. 这个东西的下载地址是 http://source ...
- Pangolin学习
0.1. 资料 0.2. 使用说明 0.3. HelloPangolin 0.4. Plot data with ros 0.1. 资料 泡泡机器人 github example opengl中摄像机 ...
- matlab笔记（1） 元胞结构cell2mat和num2cell
摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...
- JS中常用的几种时间格式处理-【笔记整理】
//此处整理点平时常用到的时间格式处理方法 ------------------------------------------- //时间格式化函数 Date.prototype.format = ...
- N维法向量与N维超平面的关系的简单证明（日志二）
虽然按照上面的方式证明出来,但感觉之中,似乎依旧是不严密的, 如下: 如果直线是2x+2y+1=0 那么(-1,1)也是其平行向量 ,.那么(1,1)依旧是法向量 此时,直线经过(0,-1/2)这个点 ...