html中页面背景属性,css背景属性有哪些?
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
css背景属性有哪些?background简写属性,作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图片的尺寸。
background-clip规定背景的绘制区域。
background-origin规定背景图片的定位区域。
下面来简单介绍一下这些背景属性。
background属性:
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background-color属性:颜色名称,如:background-color:red;
十六进制背景色,如:background-color:#ff0000; / background-color:#f00;
rgb颜色,这里如果是rgba,a表示透明程度,为0全透明,为1全显示,如:background-color:rgb(255,0,0); / background-color:rgba(0,0,255,0.8);
transparent,透明,如:background-color:transparent;
background-image属性:url图片地址,可以多个图片,如:background-image: url(img/a.jpg),url(img/b.jpg);
none,不显示背景图像
background-repeat属性:repeat:水平和垂直方向都重复图像,如:background-repeat: repeat;
repeat-x:水平方向重复图像
repeat-y:垂直方向重复图像
no-repeat:图像不重复
background-position属性:位置名字组合定位,只写一个默认另一个为居中,如:background-position: right bottom; / background-position: center;
百分比位置,如:background-position: 20% 20%;
具体像素位置, 如:background-position: 20px 20px;
background-attachment属性:scroll:背景图像相对于页面不动,会随着网页的滚动而移动,默认
fixed:背景图像相对于浏览器窗口不动,内容滚动的时候背景图像不动,如:background-attachment: fixed;
background-size属性:像素大小,只写一个默认另一个为auto,如:background-size: 200px 100px;
百分比大小,如:background-size: 60% 60%;
cover:背景图像覆盖当前元素的所有背景区域,如:background-size: cover;
contain:图像显示最大且刚好完全显示,一般不能覆盖全部背景区
background-clip属性:border-box:背景覆盖到边框区域,如:background-clip: border-box;
padding-box:背景覆盖到padding区域
content-box:背景只覆盖到content部分
background-origin属性:border-box:背景图像的起始位置在边框处,如:background-origin: border-box;
padding-box:背景图像的起始位置从padding处开始
content-box:背景图像的起始位置从content处开始
更多web开发知识,请查阅 HTML中文网 !!
html中页面背景属性,css背景属性有哪些?相关推荐
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- html页面透明度属性,css透明度属性是什么?
css透明度属性是什么?CSS透明度属性是opacity属性.下面本篇文章就来给大家介绍一下CSS 透明度属性--opacity属性.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- html中如何消除左边界,元素的局中对齐问题,CSS盒属性使用技巧,前端开发必备...
本文介绍的盒属性应用包括以下几点: 块级元素在容器中的水平居中 绝对定位的块级元素在页面中水平垂直居中 去掉所有HTML元素的边界和填充值 去掉无序列表左侧为项目符号留出的位置 一.块级元素在容器中的 ...
- html中的float属性,css float属性 图解float属性的点点滴滴
正确使用CSS的float属性可能会变成一项艰巨的任务,它涉及内容过多,浏览器兼容性问题也很多.它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容.本文包含的实施例的应用属性float说 ...
- html中背景固定,css背景固定样式background-attachment属性介绍
原标题:css背景固定样式background-attachment属性介绍 主要为大家介绍了在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定 ...
- html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- html中outline属性,css outline属性怎么用?
CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色.样式.宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用. CSS outline属性 作用:是 ...
- php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放 代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
最新文章
- jquery源码--jquery对象
- 在cmd指令看计算机位数,在.cmd中使用Windows命令来测试32位或64位并运行命令
- JavaWeb学习之路——SSM框架之Spring(四)
- go语言 gosched
- 有哪些 Java 源代码看了后让你收获很多,代码思维和能力有较大的提升?...
- Microled简介及关键工艺(巨量转移)
- 从《华为的冬天》到AI的冬天 | 甲子光年
- 【操作系统】系统中断技术
- VeryCD将于本月关闭 P2P历史即将终结
- 物联网嵌入式STM32资料大全,超100G
- SSM毕设项目校园设备巡检管理系统04b46(java+VUE+Mybatis+Maven+Mysql)
- 2023年长安大学油气田地质与开发考研上岸前辈备考经验
- 昆石VOS2009/VOS3000 2.1.6.00 操作指南
- SR综述论文阅读的一点点笔记
- 【Latex】Latex调整行间距
- 【HCNA】-【网络模型】
- 计算机游戏者战略编写员教程
- 解析ChatGPT背后的工作原理
- 武汉理工大学软件测试重点,软件测试实验报告书(武汉理工大学).docx
- 电影院场次管理java_电影放映时间选择_09-JAVASE项目实战-电影管理系统_Java视频-51CTO学院...
热门文章
- 一对老耗子,每个月都生一对小耗子。小耗子长3个月,第四个开始变成老耗子开始生! 假如都不死,那么请问24个月后有多少只耗子?...
- 磊科nw336 linux驱动程序,磊科NW336 V2驱动
- 创业公司考勤管理如何做到快、准、狠!
- 吴畏嶙2019大作业
- 漫谈程序员系列:伤心小箭,你中了几枝
- 网页自动下载文件并汇总 (VBA)
- 计算机动态储存,动态存储器
- 大学物理 习题分析与解答(PDF)
- php比价源码,定稿毕业论文基于PHP的家电在线比价系统设计与实现喜欢就下吧(资料4)...
- 美学评价:Image Aesthetic Assessment: An Experimental Survey(计算机视觉美学评估综述)