博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
更易操作的网页细节—background背景
阅读量:6716 次
发布时间:2019-06-25

本文共 672 字,大约阅读时间需要 2 分钟。

hot3.png

多背景图片,你可以在一个标签元素里应用多个背景图片,代码类似于css2.0版本写法,但饮引用图片之间需用“,”逗号隔开。第一个图片是定位元素最上面的背景,后面的背景依次放在它下面显示,如下:

无标题文档
    

140414_SXPP_2509123.png

background-clip :规定背景的绘制区域(border-box背景被裁剪到边框盒,padding-box背景被裁剪到內边距框,conter-box背景被裁剪到内容框)

无标题文档
    

142342_OCyL_2509123.png

background-orgin规定背景图片的定位区域

此属性需要与background-pasition配合使用,你可以用background-position计算定位是从border、padding或content内容区域算起。

background-size 规定背景图片的尺寸

background-size:contain 让背景图片适应边框,以小的编剧为主进行填充,图片完整

无标题文档
    

background-size:cover 背景图片填充边框,以长的边距为准,多余的部分会被裁剪掉,图片可能不完整。

background-size:100px 100px 背景图片被缩放到这个大小

background-size:50% 100%背景图片按照这个比例缩放大小

转载于:https://my.oschina.net/zhouhang0907/blog/530308

你可能感兴趣的文章
使用DOSBox在Win7_x64下搭建汇编环境
查看>>
js插件大全 jquery插件大全
查看>>
解决ubuntu 14.04删ibus导致系统设置项目的损失后,,退出关机问题是不正常的
查看>>
理解vmp
查看>>
CentOS6.4下Mysql数据库的安装与配置
查看>>
[转]GC简介
查看>>
poj 1466 Girls and Boys (最大独立集)
查看>>
辛星与您使用CSS导航条
查看>>
统计一个文件中出现字符'a'的次数
查看>>
将Eclipse包括第一3正方形jar包裹Project Export并产生能够执行jar
查看>>
Google Pagespeed,自动压缩优化JS/CSS/Image
查看>>
Gentoo源码安装图解
查看>>
【转载】COM 组件设计与应用(三)——数据类型
查看>>
Python yield与实现
查看>>
购物车特效收集
查看>>
Access中一句查询代码实现Excel数据导入导出
查看>>
2015第49周二
查看>>
Sphinx/Coreseek 4.1的安装流程
查看>>
邮件服务器Postfix的管理 重启php-fpm
查看>>
Android Studio 项目代码全部消失--出现原因及解决方法
查看>>