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 条评论
登录 后参与评论

相关文章

来自专栏Pulsar-V

Save Camera Document

#pragma once #include "HCCamera.h" #include <time.h> #include <cstdio> #incl...

2828
来自专栏码匠的流水账

spring security reactive获取security context

本文主要研究下reactive模式下的spring security context的获取。

1762
来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2488
来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

7475
来自专栏Ryan Miao

ehcache报错

jfinal2.0+tomcat7+ehcache2.6.11+Linux Linux version 2.6.18-164.el5 (mockbuild@x8...

3729
来自专栏跟着阿笨一起玩NET

c# 使用timer定时器操作,上次定时到了以后,下次还未执行完怎么处理

------解决方案-------------------------------------------------------- 开始的时候,禁用定时器,你...

2631
来自专栏Hadoop数据仓库

Oracle sqlldr 如何导入一个日期列

1. LOAD DATA INFILE * INTO TABLE test FIELDS TERMINATED BY X'9' TRAILING NULLCO...

1786
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

2272
来自专栏我和未来有约会

简练的视图模型 ViewModel

patterns & practices Developer Center 发布了 Unity Application Block 1.2 for Silver...

2169

扫码关注云+社区