CSS3 background-size属性

请复制粘贴,图片请自带

<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<style type="text/css">
textarea{display: block; width:500px;height:500px; margin:100px auto; }
.div{ width: 250px; height: 200px; border: solid 2px red ;margin: 10px;float: left; }
.div1{
background: url(date/1.png);
}
.div2{
background: url(date/1.png) no-repeat;
}
.div3{
background: url(date/1.png) no-repeat center center;
}
.div4{
background: url(date/1.png);
background-size: 100%;
}
.div5{
background: url(date/1.png) no-repeat center center;
background-size: 100%;
}
.div6{
background: url(date/1.png) center center;
background-size: 100px 100px;
}
.div7{
background: url(date/1.png);
background-size: 100px 100px;
}
.div8{
background: url(date/1.png) ;
background-size: 100% 100%;
}
.div9{
background: url(date/1.png) center;
background-size: 100% ;
}
.div10{
background: url(date/1.png) no-repeat ;
background-size:cover;
}
.div11{
background: url(date/1.png) no-repeat center ;
background-size:contain;
}
.div12{
background: url(date/1.png) center ;
background-size: auto;
}
</style><script type="text/javascript">
</script>
</head> <body>
<div class="div div1">.div1{background: url(date/1.png); }</div>
<div class="div div2">background: url(date/1.png) no-repeat;</div>
<div class="div div3">background: url(date/1.png) no-repeat center center; </div>
<div class="div div4"></div>
<div class="div div5"></div>
<div class="div div6"></div>
<div class="div div7"></div>
<div class="div div8"></div>
<div class="div div9"></div>
<div class="div div10"></div>
<div class="div div11"></div>
<div class="div div12"></div>
<textarea style="">
background-size指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。
background-size可以设置2个值,1个为必填,1个为可选。
第1个值用于指定背景图的width,
第2个值用于指定背景图的height。
如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。
background-size: 100px 200px;背景宽100px,高200px;
background-size: 100% 100%;背景充满
background-size:cover; 缩放图像的最小值,其宽度和高度都能放入内容区域
background-size:contain;缩放图像的最大值,其宽度和高度都能放入内容区域
div {
background: url(‘../images/p1_bg.jpg‘) no-repeat center center;
background-size: 100%;
}
</textarea>
</body>
</html>

时间: 2024-11-17 12:52:46

CSS3 background-size属性的相关文章

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

css3 background

background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个属性,缩写如下: background:background-color,background-image,background-repeat ,background-attachment, background-position; 其中background-image,background-rep

background复合属性详解(上):background-image

background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本的情况是指定一张图片的url作为背景: <style> .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(h

CSS3新增颜色属性

CSS颜色属性复习 color name 颜色英文名称命名(如red,blue,pink,white等) HEX方式 十六进制方式(#FF0000,#B9B9B9等) rgb方式 三原色配色方式(rgb(255,0,00)) 这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式.CSS3中新增了几种颜色属性. CSS3新增颜色属性 1.RGBA模式 2.HSL模式 3.HSLA模式 1.RGBA模式 rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

CSS3新增文本属性实现图片点击切换效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>CSS3新增文

复习css3的部分属性和jquery的queue方法

利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画.练习例子 css3: 1.圆角 border-radius:100%; border-top-left-radius:5px; 2.变形 2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针). 3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0. 3D旋转:transform: rotateY(25deg);-----效果为

css3 常用的属性

1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样式. E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式. E:hover CSS1/2 设置元素在其鼠标悬停时的样式. E:active CSS1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. E:focus CSS1/2 设置元素在成为输入焦点(该元

利用CSS3的transform属性让元素在页面居中

今天学到让元素在页面中水平居中的新写法,利用了CSS3的transform属性,通过设置translate的值来改变元素的位置. 1.先来看看怎么实现的 页面中放一个div,width和height随便设置大小和背景色,以便查看效果: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用CSS3的