CSS3背景

设置背景图片的原始起始位置,语法为:

参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。

例子:

背景图片的裁剪,语法为:

参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

例子:

背景图片大小的设置,语法为:

auto:默认值,不改变背景图片的原始高度和宽度;cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

例子:

多重背景的设置

多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

例子:

时间: 2024-12-05 13:16:10

CSS3背景的相关文章

《图解CSS3——第4章 CSS3背景-1》

CSS3背景 4.1 CSS3背景属性简介 background是一个使用率很高的属性,也是一个十分有用的属性,能帮助设计师实现一些特殊的效果,使用起来也非常简单. 4.1.1 背景的基本属性 背景主要包括五个属性: background-color(背景颜色) background-image(背景图片) background-repeat(背景图片展示方式) background-attachment(背景图片是固定还是滚动) background-position(背景图片位置) 可以单独

《图解CSS3——第4章 CSS3背景-2》

4.2 CSS3 背景原点属性 4.2.1 background-origin 属性的语法及参数 background-origin属性主要就是用来决定 background-position属性的参考原点,即决定背景图片定位的起点.在默认情况下,背景图片的background-position属性总是以元素左上角的坐标原点对背景图片进行背景定位.CSS3的background-origin属性将打破这一格局,可以根据自己的需要来改变背景图片的background-position起始位置. 语

CSS3背景温故

1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachment(背景图片是固定还是滚动)background-position(背景图片位置)综合使用:background:[<background-color>][<background-image>][<background-repeat>][<background-a

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

CSS自学笔记(11):CSS3背景和边框

CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景(高宽,位置,透明度----). 关于背景的部分常用属性有(*为CSS3中新增属性): 值 描述 background-color 规定要使用的背景颜色. background-position 规定背景图像的位置. background-size* 规定背景图片的尺寸. background-rep

CSS3背景闪烁和图片缩放动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的背景闪烁和图片缩放动态效

第七十九,CSS3背景渐变效果

CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradient背景颜色的渐变功能 CSS3提供了linear-gradient属性实现背景颜色的渐变功能.在以前,这种效果必须采用图片才能实现的.首先,我们先看一下它的样式表,如下: linear-gradient(方位,起始色,末尾色)                  方位          可选参数,

css3 背景background

Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图像 属性 描述 Css Background-image 规定背景的背景图 2 Background-position 规定背景的定位 2 Background-repeat 规定背景的重复方式 2 Background-color 规定背景的颜色 2 Background-clip 规定背景的绘制区域 3

真正了解CSS3背景下的@font face规则

很多人只要一提到@font face规则,心中就会不由自主"哦~~"的一声:"这个我知道,可以用来生成自定义字符小图标!"话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下. 一. @font face的本质是变量 虽然说CSS3新世界才出现真正意义上的变量var,但实际上,CSS

从零开始学习前端开发 — 17、CSS3背景与渐变

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见 二.背景原点: background-origin:padding-box|border-box|content-box; 作用: