HTML 学习笔记 CSS3 (背景)

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。

1.多个背景图片

在CSS3里面 你可以在一个标签元素里应用多个背景图片 代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2.新属性:backgrounp Clip

有时候背景可能会被border边框遮挡 backgrounp-clip的添加能让我们完全控制背景的显示位置。属性值如下:

backgrounp-clip: border 背景在border边框下开始显示

backgrounp-clip:padding 背景在padding下开始显示 而不是border边框下开始显示

backgrounp-clip:content 背景在内容区域下开始显示 而不是border边框下开始或padding下开始。

4)background-clip: no-clip;默认属性值,类似与background-clip: border;

3.新属性 backgrounp origin

此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)

(1)background-origin:border-box;

从border边框位置算起

(2)background-origin:padding-box;

从padding位置算起

(3)background-origin:content-box;

从content-box内容区域位置算起;

background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。

4、新属性:Background  Size

Background Size属性用来重设你的背景图片。有几个属性值:

(1)background-size: contain;

缩小背景图片使其适应标签元素(主要是像素方面的比率)

(2)background-size: cover;

让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)

(3)background-size: 100px 100px;

标明背景图片缩放的尺寸大小

(4)background-size: 50% 100%;

百分比是根据内容标签元素大小,来缩放图片的尺寸大小

5、新属性:Background Break

css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。

属性值:

(1)Background-break: continuous;

此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)

(2)Background-break: bounding-box;

重新考虑区域之间的间隔

(3)Background-break: each-box;

对每一个独立的标签区域进行背景的重新划分。

时间: 2024-10-17 18:40:39

HTML 学习笔记 CSS3 (背景)的相关文章

css3学习笔记之背景

background-size background-size指定背景图像的大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <style>  body { background:url(/try/demo_source/img_flwr.gif); background-size:80px 60px; background-re

HTML 学习笔记 CSS3(Animation)

CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果. 同样的先看一个例子: <html> <head> <meta charset="UTF-8"

【CSS学习笔记】背景图片

直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/background-repeat: no-repeat; /*水平方向显示图片repeat-x 竖直方向显示图片repeat-y 不重复图片no-repeat*/ background-attachment: fixed; /*在页面特别长有滚动条时,可以固定图片*/ 相关知识点: 1.背景图与背

HTML 学习笔记 CSS3 (文本效果)

text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或

HTML 学习笔记 CSS3 (多列)

CSS3多列 通过CSS3 我们能够创建多个列来对文本进行布局. 在这篇文章中 你将了解到如下多列属性: column-count column-gap column-rule 浏览器支持: 多列的属性: 实例: <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .newspaper { /*

css学习笔记——CSS3 transition 属性

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3 transition 属性</title> <style> .box{ width:100px; height:100px; background:red; -web

HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body>

[CSS3] 学习笔记-CSS3选择器详解(一)

1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 /*id包含div字符串,就加载效果*/ 8 [id*=div]

1.【SELinux学习笔记】背景

1.引用监视器 目前大多数操作系统中主要的访问控制类型叫做DAC(任意访问控制),DAC的特性主要指用户访问资源的权限.但DAC有一些弱点,为了客服这些弱点,MAC诞生了(强制访问控制). 但MAC也存在一定的弱点且使用起来不是很灵活.那么SELinux带给Linux 的价值可以称之为一个灵活的.可配置的MAC机制. 了解引用监视器对我们理解访问控制有很大的帮助,我们首先来了解下引用监视器原理图,如下: 图1 这种方法的优势在与可以将程序访问资源限制在访问规则当中,由这些规则来决定访问主体是否有