更易操作的网页细节—background背景
来源:互联网 发布:淘宝模特签约合同范本 编辑:程序博客网 时间:2024/05/29 14:25
多背景图片,你可以在一个标签元素里应用多个背景图片,代码类似于css2.0版本写法,但饮引用图片之间需用“,”逗号隔开。第一个图片是定位元素最上面的背景,后面的背景依次放在它下面显示,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>无标题文档</
title
>
<
style
>
.box{width:1200px; height:700px; border:solid red 3px; background:url(images/1.jpg) no-repeat, url(images/2.jpg) no-repeat; }
</
style
>
</
head
>
<
body
>
<
div
class
=
"box"
></
div
>
</
body
>
</
html
>
background-clip :规定背景的绘制区域(border-box背景被裁剪到边框盒,padding-box背景被裁剪到內边距框,conter-box背景被裁剪到内容框)
1
2
3
4
5
6
7
8
9
10
11
12
13
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>无标题文档</
title
>
<
style
>
.box{width:600px; height:400px; border: dashed 30px red; padding:50px; background:url(images/1.jpg); background-clip:padding-box; }
</
style
>
</
head
>
<
body
>
<
div
class
=
"box"
></
div
>
</
body
>
</
html
>
background-orgin规定背景图片的定位区域
此属性需要与background-pasition配合使用,你可以用background-position计算定位是从border、padding或content内容区域算起。
background-size 规定背景图片的尺寸
background-size:contain 让背景图片适应边框,以小的编剧为主进行填充,图片完整
1
2
3
4
5
6
7
8
9
10
11
12
13
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>无标题文档</
title
>
<
style
>
.box{width:600px; height:600px; border: solid 3px red; background:url(images/2.jpg) no-repeat; background-size:contain; } /*可以换成cover或100px 100px或50% 100%*/
</
style
>
</
head
>
<
body
>
<
div
class
=
"box"
></
div
>
</
body
>
</
html
>
background-size:cover 背景图片填充边框,以长的边距为准,多余的部分会被裁剪掉,图片可能不完整。
background-size:100px 100px 背景图片被缩放到这个大小
background-size:50% 100%背景图片按照这个比例缩放大小
0 0
- 更易操作的网页细节—background背景
- css3更易操作的网页细节-box-shadow阴影
- css3的background-clip 背景
- background 背景属性的简写
- 背景background
- background背景
- background背景
- CSS的背景图像属性background
- CSS背景(background)的基本用法
- CSS中背景的综合属性background
- 关于背景background-position的问题
- css background控制背景图像的位置
- css 背景属性background的使用方法
- CSS background-position 背景定位的用法
- css复习——背景background day2
- css——background背景属性
- 更易用的圆角控件——CardView
- CSS细节--background-image
- Spark修炼之道(基础篇)——Linux大数据开发基础:第四节:Linux文件系统(二)
- 杭电1856More is better
- 个人收集的一些库、工具、技术介绍
- C语言、C++内存对齐问题详解
- LTView
- 更易操作的网页细节—background背景
- Android 5.0之后找不到apache类文件解决办法
- 【UML】 类图
- IOS应用显示不全
- Git在iOS开发中的使用
- C++二分
- IOS 游戏键盘
- 访问Apache主页的Tomcat Web Application Manager方法
- cocos2dx ClippingNode实现跑马灯效果和文字效果