css3:与背景的相关样式
1、
(1)background-origin : border-box | padding-box | content-box;(设置元素背景图片的原始起始位置。)
//需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
(2)background-clip(用来将背景图片做适当的裁剪以适应实际需要。)
语法:background-clip : border-box | padding-box | content-box | no-clip
2、
background-size(设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。)
语法:background-size: auto | <长度值> | <百分比> | cover | contain
//
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
//
3、
multiple backgrounds(多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background
的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,
而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。)
例如{background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;}
css3:与背景的相关样式的更多相关文章
- CSS3系列三(与背景边框相关样式 、变形处理、动画效果)
与背景相关的新增属性 大家都知道在HTML页面中,元素都是由以下几部分组成 使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为p ...
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
- CSS3 文字与字体相关样式
给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- CSS3系列二(媒体支持、文字与字体相关样式、盒相关样式)
CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...
- web前端学习(三)css学习笔记部分(7)-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
- css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
随机推荐
- linux shell send and receive emails
http://www.netcan666.com/2016/02/20/%E5%88%A9%E7%94%A8telnet%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E5% ...
- mssql全文索引
在使用全文索引的时候例如: SELECT [PRID] ,[PRCode] ,[PRDesc] FROM [test1].[dbo].[PerformanceIssue] where contains ...
- CSS弹性盒布局
<html> <head> <meta charset="utf-8"/> <title></title> <st ...
- ArcGIS API for Silverlight 调用GP服务加载等值线图层
原文:ArcGIS API for Silverlight 调用GP服务加载等值线图层 第二篇.Silverlight客户端调用GP服务 利用ArcGIS API for Silverlight实现G ...
- TCP keepalive overview
2. TCP keepalive overview In order to understand what TCP keepalive (which we will just call keepali ...
- An unknown Subversion error occurred. (code = 155037)
这是因为在svn更新时意外中断引起的. 我的解决办法:如果本地没有更改,只是单纯获取svn的项目,则另起一个文件夹,重新checkout: 如果是本地有更改,则复制到新的文件夹,重新update.
- RaspberryPi uart
通过调试口查看树莓派开机启动信息,学习python控制串口的方法. 参考链接: http://www.elinux.org/Serial_port_programming 硬件连接: 硬件原理图链接: ...
- Infinity loop in cursor iteration
原始代码如下: begin DECLARE @SQL_STMT NVARCHAR(300), @V_CLIENT_ID INT, @V_PGNAME VARCHAR(1000), @V_LOGID I ...
- jquery实现"跳到底部","回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 初涉MySQL
本文要点: MySQL基础 安装MySQL 配置MySQL 使用MYSQL 一.MySQL基础 MySQL 由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一个开源的关系型数据 ...