CSS3背景

在CSS3之前我们对背景图片的控制极为有限,只能决定其来源、位置、重复,CSS3的到来对背景的使用开辟了一片新天地。

1、background-size

在 CSS3中,background-size 属性规定背景图像的尺寸。这就允许我们在不同的环境中重复使用背景图片,以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

  1. length:设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。
  2. percentage: 以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。
  3. cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。
  4. contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

2、background-origin

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

  1. padding-box: 背景图像相对于内边距框来定位
  2. border-box: 背景图像相对于边框盒来定位
  3. content-box: 背景图像相对于内容框来定位

如果背景图像的 background-attachment 属性为fixed,则该属性没有效果。

3、background-clip

background-clip 属性规定背景的绘制区域

  1. padding-box: 背景被裁剪到边框盒
  2. border-box: 背景被裁剪到内边距框
  3. content-box: 背景被裁剪到内容框

3、多背景

在之前的CSS中只能使用一张背景图片,CSS3可以使用多张背景图片

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
         url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
         url("haorooms.jpg") 400px 201px no-repeat;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闵开慧

table边框设置

table边框设置 一、表格的常用属性 基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即...

3235
来自专栏十月梦想

文本属性

  注意:text-shadow(文本阴影):第一个值表示水平阴影 第二个垂直 第三模糊距离第四个模糊像素

854
来自专栏小工匠技术圈

[Java小工匠]CSS背景1-概述

background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。 默认地,背景图像位于元素的左上角...

652
来自专栏小樱的经验随笔

Android布局属性详解

RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居...

3113
来自专栏Java成神之路

Android基础_2 Activity线性布局和表格布局

在activity的布局中,线性布局和表格布局是最简单的,这次分别从线性布局,表格布局以及线性布局和表格混合布局做了实验,实验中只需要编写 相应的xml的代码,...

632
来自专栏前端知识分享

第95天:CSS3 边框、背景和文字效果

  transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

1132
来自专栏calmound

CSS元素分类

快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。                设置display:block...

2835
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

1144
来自专栏.Net移动开发

VS2017移动开发(C#、VB.NET)——Numeric控件的使用方式

若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

1551
来自专栏十月梦想

背景属性

733

扫码关注云+社区