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;}

时间: 2024-12-27 20:32:47

css3:与背景的相关样式的相关文章

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

CSS3系列三(与背景边框相关样式 、变形处理、动画效果)

与背景相关的新增属性 大家都知道在HTML页面中,元素都是由以下几部分组成 使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为padding-box则不包含边框,包含padding区域.如果设定为content-box则背景只包含内容区域 background-origin属性:指定绘制背景图像的绘制起点,它的属性值跟background-clip是一样的,也就是说你可以通过它的指定绘制时从边框的左上角开始或者从内容的左上角

CSS3之背景 background-size background-origin background-clip

[一]background-size  规定背景图像的尺寸 以像素规定尺寸 div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } 以百分比规定尺寸(尺寸相对于父元素的宽度和高度) div { background:url(bg_flower.gif); -m

导航链接添加背景图片替换样式

HTMl代码: <div class="welcome_button"> <ul> <li><a href="#">signup</a></li> <li><a href="#">login</a></li> </ul> </div> CSS样式: <style type="text/cs

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效. 实现的代码. html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="form"

纯CSS3实现漂亮的价格表样式代码

分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main"> <p style="text-align: center; padding: 30px; font-size: 16px"> <a href="index.html">DEMO 1</a>    <a href=&q

css3之背景样式

css3中增加的背景相关的样式十分好用 background-origin  : 决定了背景在盒模型中的初始位置,提供了三个值,border,padding和content; background-clip: 决定了边框是否覆盖住背景,提供了两个值,border和padding; background-size: 可指定背景的大小,以像素或百分比显示.其中值还有auto-不改变原始图片大小,cover-将图片背景等比缩放填满整个容器, contain-背景图片等比缩放至某一边紧贴容器边缘为止.

繁星CSS3之旅-CSS基本样式-CSS背景

CSS背景 1.背景 CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 (1)设置背景颜色 例: <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="styl

css3盒子相关样式

1.css3的display属性: inline:内联 inline-block:可以设置宽高的内联 block:设置为块: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3盒子类型</title> <style> /*inline:内联,inline-block:可以设置宽高的内联,