css3学习总结4--CSS3背景
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背景的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- CSS3学习笔记(4)-CSS3函数
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
随机推荐
- JAVA输入一个整数,求出其所有质因数
首先得求出能整除A的数,再判断I是否是质数!!! import java.util.*; public class aa { public static void main(String[] args ...
- 获取IplImage 数据并打印
int main(int argc, char* argv[]){ IplImage *img=cvLoadImage("c://fruitfs.bmp",1); CvSca ...
- linux 破解版confluence安装
OS centos 6.5 需要的安装包如下: jre-7u67-linux-x64.rpm atlassian-confluence-5.4.4-x64.bin mysql-connector- ...
- Eclipse在线安装ADT插件
要想使用Eclipse开发Android应用,首先要安装一个ADT插件,在此记录一下在Eclipse中采用在线安装的方式ADT插件,我使用的Eclipse版本是:eclipse-jee-luna-SR ...
- Spring入门_01
<bean id="userAction" class="com.umgsai.spring.UserAction"> <property n ...
- const 与 readonly的区别
首先先解释下什么是静态常量以及什么是动态常量. 静态常量是指编译器在编译时候会对常量进行解析,并将常量的值替换成初始化的那个值. 动态常量的值则是在运行的那一刻才获得的,编译器编译期间将其标示为只读常 ...
- gdb 多线程调试
gdb 多线程调试 http://hi.baidu.com/hcq11/blog/item/9f5bfc6e696209d680cb4a25.html http://hi.baidu.com/lit ...
- Oracle 11g客户端在Linux系统上的配置步骤详解
Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...
- MySQL获取随机数
如何通过MySQL在某个数据区间获取随机数? MySQL本身提供一个叫rand的函数,返回的v范围为0 <= v < 1.0. 介绍此函数的MySQL文档也介绍道,可以通过此计算公式FLO ...
- POJ 1836 Alignment
Alignment Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11450 Accepted: 3647 Descriptio ...