安卓 background的图片随着textview的大小而改变_关于CSS中的背景属性background简述...
像我之前提到的那样,文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层,背景层可以是完全透明或者其它颜色,也可以是一张图片。此背景层由8个CSS属性(加上1个简写的属性)控制。
background-color
background-color属性设置元素的背景颜色。它的值可以是任意合法的颜色值或者是transparent关键字。
.left { background-color: #ffdb3a; }.middle { background-color: #67b3dd; }.right { background-color: transparent; }
背景颜色绘制在由[background-clip](#backgroundclip)属性指定的盒模型的区域内。如果还设置了任何背景图像,则在它们后面绘制颜色层。与可以有多个的图像层不同,对于一个元素,我们只能有一个颜色层。
background-image
background-image属性定义元素的一个或多个背景图像。它的值通常是用url()符号定义的图像的url。也可以使用none作为它的值,但这样会生成一个空的背景层
.left { background-image: url('ire.png'); }.right { background-image: none; }
我们也可以指定多张背景图片并通过逗号分隔。后面的图片都会绘制在Z轴方向上前一个图片的后面。
.middle { background-image: url('khaled.png'), url('ire.png'); /* Other styles */ background-repeat: no-repeat; background-size: 100px;}
background-repeat
background-repeat属性控制背景图片在被[background-size](#backgroundsize)属性改变了大小及被[background-position](#backgroundposition )属性定位后如何平铺。
该属性的值可以是 repeat-x, repeat-y, repeat, space, round, no-repeat关键字,除了repeat-x和repeat-y,其他值可以为x轴和y轴定义一次,也可以单独定义每个维。
.top-outer-left { background-repeat: repeat-x; }.top-inner-left { background-repeat: repeat-y; }.top-inner-right { background-repeat: repeat; }.top-outer-right { background-repeat: space; }.bottom-outer-left { background-repeat: round; }.bottom-inner-left { background-repeat: no-repeat; }.bottom-inner-right { background-repeat: space repeat; }.bottom-outer-right { background-repeat: round space; }
background-size
background-size属性定义背景图片的大小,它的值可以是关键字,长度或者百分比。
可用于此属性的关键字为“contains”和“cover”。contain将等比缩放图像到最大的大小。另一方面,cover将把图像缩放到尽可能小的尺寸,其中整个背景区域仍然被覆盖。
.left { background-size: contain; background-image: url('ire.png'); background-repeat: no-repeat;}.right { background-size: cover; /* Other styles same as .left */ }
对于长度和百分比,我们可以同时指定背景图片的宽高,百分比值是根据元素的大小计算的。
.left { background-size: 50px; /* Other styles same as .left */ }.right { background-size: 50% 80%; /* Other styles same as .left */ }
background-attachment
background-attachment属性控制控制背景图像相对于视口和元素的滚动方式 。它有三个潜在的值。
fixed意味着背景图片固定在视口并且不会移动,即使用户正沿着视口滚动。local意味着背景图片固定在它在元素中的位置。如果这个元素可以滚动并且背景图片定位在顶部,那么当用户向下滚动这个元素,背景图片将会从视图中滚出去。最后scroll意味着背景图片是固定的且不会随着元素内容的滚动而滚动。
.left { background-attachment: fixed; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; overflow: scroll;}.middle { background-attachment: local; /* Other styles same as .left */ }.right { background-attachment: scroll; /* Other styles same as .left */ }
background-position
这个属性结合background-origin属性定义背景图片的起始位置应在何处。它的值可以是关键字,长度或者百分比,我们可以指定沿x轴和y轴的位置。
可用于此属性的关键字为top, right, bottom, left, 和center,我们可以任意组合这些关键字,如果只明确指定了一个关键字,那么另外一个默认就是center。
.top-left { background-position: top; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat;}.top-middle { background-position: right; /* Other styles same as .top-left */ }.top-right { background-position: bottom; /* Other styles same as .top-left */ }.bottom-left { background-position: left; /* Other styles same as .top-left */ }.bottom-right { background-position: center; /* Other styles same as .top-left */ }
对于长度和百分比,我们也可以指定沿x轴和y轴的位置。百分比值是按元素的大小计算的。
.left { background-position: 20px 70px; /* Others same as .top-left */ }.right { background-position: 50%; /* Others same as .top-left */ }
background-origin
background-origin属性指定背景图片应根据盒模型的哪个区域进行定位。
当值为border-box时,背景图片的位置根据边框区域定位,为padding-box时其位置根据边距区域定位,为content-box时其位置根据内容区域定位。
.left { background-origin: border-box; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px;}.middle { background-origin: padding-box; /* Other styles same as .left*/ }.right { background-origin: content-box; /* Other styles same as .left*/ }
background-clip
background-clip属性确定背景绘制区域,这是背景可以被绘制的区域。和background-origin属性一样,它也 基于盒子模型的区域。
.left{ background-clip: border-box; background-size: 50%; background-color: #ffdb3a; background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px;}.middle { background-clip: padding-box; /* Other styles same as .left*/ }.right { background-clip: content-box; /* Other styles same as .left*/ }
background
最后,background属性是其他背景相关属性的简写。子属性的顺序无关紧要,因为每个属性的数据类型不同。然而对于background-origin 和 background-clip,如果只指定了一个盒模型区域,那么这两个属性都会应用这个值。如果指定了两个,那么第一个值将用于background-origin属性。
安卓 background的图片随着textview的大小而改变_关于CSS中的背景属性background简述...相关推荐
- 安卓 background的图片随着textview的大小而改变_苹果4G内存吊打安卓8G内存?看看苹果是怎么虐安卓的!...
戳上面的蓝字关注我们哦! 大家好!我是小马哥! 精致有趣的科技数码体验与测评 尽在"来回科技" 有锁机全面科普 科普丨什么是有锁机/卡贴机 信号测试丨有锁机vs无锁机 全新来回商城 ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- 【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性 集中定义 8个 背景相关属性 2. background-color 属性: 元素的 背景颜色 ( ...
- CSS中Body背景图片的自适应
CSS中Body背景图片的自适应 html{height:100%; } body{background:url(../image/bg-m.jpg) no-repeat;background-siz ...
- css语言中选项是背景图像的属性,HTML_学习CSS的背景图像属性background,CSS的背景属性“background”提供 - phpStudy...
学习CSS的背景图像属性background CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看backgr ...
- 前端背景图放置_web前端入门到实战:css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
- 用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
- HTMLCSS——CSS中设定背景图片无法显示的解决办法
问题描述: 当前 .html 文件和 image 文件夹在同一目录下,均为当前项目根目录. 用如下代码在HTML中设定CSS样式,背景图片无法显示. <!-- HTML代码 --> < ...
最新文章
- 累加结合律,交换律,分配律的一个例子
- ubuntu 10.04 安装arm交叉编译器
- SFB 项目经验-03-共存迁移-Lync 2013-TO-SFB 2015-完成
- 交互式线上科学期刊Distill上线,Ian Goodfellow表示“学ML就找它”
- VC学习笔记 -单选按钮控件(Ridio Button)的使用
- 命令注入_命令注入绕过方式总结 (20210111学习笔记)
- OpenCV学习笔记五-图像混合
- linux网络编程、socket编程
- 微软官网真的是一个神奇的地方,高清壁纸,直接下载
- C#基础1:输入输出+变量定义
- 记一次在Tomcat部署项目后无法启动该项目的例子
- [转]Oracle - 数据库的实例、表空间、用户、表之间关系
- python桌面程序臃肿_为Python应用构建最精简Docker
- 手机进程多了,有的进程就无法联网?
- asp在线html编辑器,ASP下使用FCKeditor在线编辑器的方法
- 笑傲江湖与三层交换、路由......
- 黑苹果无线网卡的三种解决方案
- 0基础学Python第四天:Python3的基础语法
- 临近年关,为何越来越多的程序员不愿回家,带你盘点那些程序员最怕的几件事
- python开源论坛 商城_python 开源商城安装
热门文章
- 刷抖音18.5G、看视频22.5G,国美通报员工上班摸鱼:回应来了
- 摊上事了?中国卖家对亚马逊发起集体诉讼:3000多账号被封 损失惨重
- 美柚或赴境外IPO 阿里京东等为其客户
- “考不上本科是智商有问题”,这位吴先生火了!涉事公司回应...
- iPhone 12开启5G续航锐减 苹果官方回应了!
- 4月15日见?疑似一加8 Pro真机谍照曝光:开孔双曲面屏加持
- 王者归来!华为P40 Pro渲染图曝光:后置矩阵徕卡五摄模组
- 全球最快!小米发布超级无线闪充技术,小米9 Pro 5G将首发搭载
- 卢伟冰直播拆机 或是性价比最高的骁龙855手机
- 支付宝上线“老年版相互宝”:爸妈终于可以加入了