Heim > Web-Frontend > HTML-Tutorial > CSS3 背景_html/css_WEB-ITnose

CSS3 背景_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:36:23
Original
929 Leute haben es durchsucht

概览

CSS3 包含几个新的背景属性,它们提供了对背景更强大的控制。

新的属性

  • background-size: 规定背景图片的尺寸。

  • background-origin: 规定背景图片的定位区域。

  • background-clip: 规定背景的绘制区域。

浏览器支持

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

背景尺寸

background-size 属性规定背景图像的尺寸。

body{    background: url('bg_flower.gif');    background-size: 63px 100px;    background-repeat: no-repeat;    padding-top: 80px;}
Nach dem Login kopieren

设置背景尺寸的方式有如四种

数值定义

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 auto。

百分比

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 auto。

cover

使背景图像扩充到足够大,以使背景图像完全覆盖背景区域。

你可以将其等同于 background-size: 100% auto;

背景图像的某些部分也许无法显示在背景定位区域中。

contain

把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

使背景图像最大,但不会超出背景区域,等效下面的情况:

  • 如果背景区域宽大于高的尺寸,相当于 background-size: auto 100%;

  • 如果背景区域高大于宽的尺寸,相当于 background-size: 100% auto;

下图展示了不同属性值的效果。

背景图像定位区域

background-origin 属性规定 background-position 属性相对于什么位置来定位。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div {    background: url('bg_flower.gif');    background-repeat: no-repeat;    background-size:100% 100%;    background-origin:content-box;}
Nach dem Login kopieren

定位区域默认是在 padding-box.

多背景图像

CSS3 允许您为元素使用多个背景图像。

body {    background-image:url('bg_flower.gif'),url('bg_flower_2.gif');}
Nach dem Login kopieren

每个图像还可以使用不同的属性。

p {    background:    url('turq_spiral.png') 30px -10px no-repeat,    url('pink_spiral.png') 145px 0px no-repeat,    url('gray_spiral.png') 140px -30px no-repeat,  #ffbd75;}
Nach dem Login kopieren
背景颜色绘制区域

background-clip 属性规定背景颜色的绘制区域。同background-origin的属性值。

background-clip: border-box|padding-box|content-box;
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage