背景图的属性（backgroud）

backgroud：red url（../img/tupian.png）
1、backgroud-origin（背景图的起始点）
属性值：
padding-box默认值
border-box
content-box

2、backgroud-clip（裁剪）
属性值：
padding-box
bordering-box默认值
content-box

3、backgroud-size：控制背景图大小
属性值：

backgroud-size:30px 30px
backgroud-size:30% 30%
cover:背景图等比例放大，直到铺满为止
contain：背景图只要有一边沾满就停止缩放

4、多背景设置
backgroud：url（img/tupian.png）no-repeat,url(img/rr.png）no-repeat left top;

网页中设置图片方法：
语法：background-image：url(背景图片的路径及全称)

说明：
网页上有俩种图片形式：插入图片、背景图
插入图片：属于网页内容，也就是结构

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等

1、background-color：red；
2、网页中图片的展示形式：img标签导入的图片背景图；

背景图小于屏幕，显示平铺；
背景图默认状态：
a、背景图小于容器尺寸：平铺
b、背景图等于容器的尺寸：整好显示
c、背景图大于容器的尺寸：只显示容器区域

3、控制背景图是否平铺以及平铺状态
background-repeat：

属性值;
repeat(平铺，默认)
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺

4、backgroud-position：左右位置上下位置；
例如：background-position：left center；

background-position：0 100px；

第一个属性值：正值往右负值往左
第二个属性值：正值往下负值往上

复合式写法：background：pink url（img/gf.png） no-repeat left bottom;(背景色、url、平铺、设置位置)

5、背景图的固定：
background-attachment:;

属性值：
fixed 固定；
scroll 滚动；

具体用法：
body{
background：url（img/gh.png）no-repeat right bottom;
background-attachment:fixed; //图片一致停留在右下角不动
}

背景图的属性（backgroud）相关推荐

HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
安卓button设置背景图_这些安卓源码调试技巧，不懂的人月薪绝对不过 30k ！
今天我要跟你分享的是Framework的学习和调试的方法. 首先,Android是一种基于Linux的开放源代码软件栈,为广泛的设备和机型而创建.下图是Android平台的主要组件. 从图中你可以看到 ...
前端背景图放置_CSS 背景图片排版
使用 CSS 套用背景图片到元素中可能是您前端设计过程中最常用到的功能. background 有非常丰富的属性,让我们可以针对不同的需求做设定. 同时一个元素可以具有多张背景图片.如果您想要套用多张 ...
精灵图，背景图缩放。盒子阴影，
文章目录精灵图背景图大小连写盒子阴影过渡骨架标签 SEO三大标签标题图标--favicon 精灵图将小图合成一个大图优点:减少服务器的发送次数,减轻服务器的压力,提高页面的加载速度 ...
html 给照片添加圆角属性,CSS3新增属性（背景图、边框背景、圆角）
1.Background-size 背景尺寸说明:background-size 规定背景图像的尺寸属性值 length (10px) 规定背景图的大小.第一个值宽度,第二个值高度.(直接定义背景 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
css禁止背景图拉伸_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽) 重复展示(用无数张同样的图片来铺满容器的背景面积) x轴 /y轴重复展示(纵 ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
web——CSS精灵图（背景图、定位背景图片background-position属性）
web--CSS精灵图(背景图.定位背景图片background-position 属性) 一.background-position属性二.实例一.background-position属性例 ...

背景图的属性（backgroud）

背景图的属性（backgroud）相关推荐

最新文章

热门文章