css3背景

  • 1. background-size
  • 2. background-origin
  • 3. background-clip

示例:

className
{
  background:url(bg_flower.gif);
  -moz-background-size:63px 100px; /* 老版本的 Firefox */
  background-size:63px 100px;
  background-repeat:no-repeat;
}

  你指定的大小是相对于父元素的宽度和高度的百分比的大小。

background-size两个参数可以设置成和原图像不一样大小的尺寸,不过那样背景图片就被拉伸了

background-origin 属性

background-origin 属性规定背景图片的定位区域。

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

示例:

.className{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

多重背景图片

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

实例:

为 body 元素设置两幅背景图片:

body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

background-clip 属性

标签定义及使用说明

JavaScript 语法:

object object.style.backgroundClip="content-box"

语法

background-clip: border-box|padding-box|content-box;
说明
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。

实例

规定背景的绘制区域:

.className
{
background-color:yellow;
background-clip:content-box;
}

总结:

属性 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

css3学习总结4--CSS3背景的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  4. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  7. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  8. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  9. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  10. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. JAVA输入一个整数,求出其所有质因数

    首先得求出能整除A的数,再判断I是否是质数!!! import java.util.*; public class aa { public static void main(String[] args ...

  2. 获取IplImage 数据并打印

    int main(int argc, char* argv[]){ IplImage *img=cvLoadImage("c://fruitfs.bmp",1);    CvSca ...

  3. linux 破解版confluence安装

    OS  centos 6.5  需要的安装包如下: jre-7u67-linux-x64.rpm atlassian-confluence-5.4.4-x64.bin mysql-connector- ...

  4. Eclipse在线安装ADT插件

    要想使用Eclipse开发Android应用,首先要安装一个ADT插件,在此记录一下在Eclipse中采用在线安装的方式ADT插件,我使用的Eclipse版本是:eclipse-jee-luna-SR ...

  5. Spring入门_01

    <bean id="userAction" class="com.umgsai.spring.UserAction"> <property n ...

  6. const 与 readonly的区别

    首先先解释下什么是静态常量以及什么是动态常量. 静态常量是指编译器在编译时候会对常量进行解析,并将常量的值替换成初始化的那个值. 动态常量的值则是在运行的那一刻才获得的,编译器编译期间将其标示为只读常 ...

  7. gdb 多线程调试

    gdb 多线程调试 http://hi.baidu.com/hcq11/blog/item/9f5bfc6e696209d680cb4a25.html  http://hi.baidu.com/lit ...

  8. Oracle 11g客户端在Linux系统上的配置步骤详解

    Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...

  9. MySQL获取随机数

    如何通过MySQL在某个数据区间获取随机数? MySQL本身提供一个叫rand的函数,返回的v范围为0 <= v < 1.0. 介绍此函数的MySQL文档也介绍道,可以通过此计算公式FLO ...

  10. POJ 1836 Alignment

    Alignment Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11450 Accepted: 3647 Descriptio ...