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背景属性有哪些?相关推荐

  1. html图片背景属性,css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  2. html页面透明度属性,css透明度属性是什么?

    css透明度属性是什么?CSS透明度属性是opacity属性.下面本篇文章就来给大家介绍一下CSS 透明度属性--opacity属性.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  3. html中如何消除左边界,元素的局中对齐问题,CSS盒属性使用技巧,前端开发必备...

    本文介绍的盒属性应用包括以下几点: 块级元素在容器中的水平居中 绝对定位的块级元素在页面中水平垂直居中 去掉所有HTML元素的边界和填充值 去掉无序列表左侧为项目符号留出的位置 一.块级元素在容器中的 ...

  4. html中的float属性,css float属性 图解float属性的点点滴滴

    正确使用CSS的float属性可能会变成一项艰巨的任务,它涉及内容过多,浏览器兼容性问题也很多.它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容.本文包含的实施例的应用属性float说 ...

  5. html中背景固定,css背景固定样式background-attachment属性介绍

    原标题:css背景固定样式background-attachment属性介绍 主要为大家介绍了在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定 ...

  6. html中图片太大了,css背景图片太大的坏处与解决方法

    在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...

  7. css中float详解,CSS浮动属性Float详解?史上最全Float详解

    我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...

  8. html中outline属性,css outline属性怎么用?

    CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色.样式.宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用. CSS outline属性 作用:是 ...

  9. php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放

    css背景图根据屏幕大小自动缩放 代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...

最新文章

  1. jquery源码--jquery对象
  2. 在cmd指令看计算机位数,在.cmd中使用Windows命令来测试32位或64位并运行命令
  3. JavaWeb学习之路——SSM框架之Spring(四)
  4. go语言 gosched
  5. 有哪些 Java 源代码看了后让你收获很多,代码思维和能力有较大的提升?...
  6. Microled简介及关键工艺(巨量转移)
  7. 从《华为的冬天》到AI的冬天 | 甲子光年
  8. 【操作系统】系统中断技术
  9. VeryCD将于本月关闭 P2P历史即将终结
  10. 物联网嵌入式STM32资料大全,超100G
  11. SSM毕设项目校园设备巡检管理系统04b46(java+VUE+Mybatis+Maven+Mysql)
  12. 2023年长安大学油气田地质与开发考研上岸前辈备考经验
  13. 昆石VOS2009/VOS3000 2.1.6.00 操作指南
  14. SR综述论文阅读的一点点笔记
  15. 【Latex】Latex调整行间距
  16. 【HCNA】-【网络模型】
  17. 计算机游戏者战略编写员教程
  18. 解析ChatGPT背后的工作原理
  19. 武汉理工大学软件测试重点,软件测试实验报告书(武汉理工大学).docx
  20. 电影院场次管理java_电影放映时间选择_09-JAVASE项目实战-电影管理系统_Java视频-51CTO学院...

热门文章

  1. 一对老耗子,每个月都生一对小耗子。小耗子长3个月,第四个开始变成老耗子开始生! 假如都不死,那么请问24个月后有多少只耗子?...
  2. 磊科nw336 linux驱动程序,磊科NW336 V2驱动
  3. 创业公司考勤管理如何做到快、准、狠!
  4. 吴畏嶙2019大作业
  5. 漫谈程序员系列:伤心小箭,你中了几枝
  6. 网页自动下载文件并汇总 (VBA)
  7. 计算机动态储存,动态存储器
  8. 大学物理 习题分析与解答(PDF)
  9. php比价源码,定稿毕业论文基于PHP的家电在线比价系统设计与实现喜欢就下吧(资料4)...
  10. 美学评价:Image Aesthetic Assessment: An Experimental Survey(计算机视觉美学评估综述)