首页 > 其他分享 >9 CSS背景属性

9 CSS背景属性

时间:2023-08-21 18:45:09浏览次数:42  
标签:平铺 repeat 背景 CSS background 背景图片 属性

CSS 背景属性
1. background-color(背景颜色)

页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。
属性使用:

/*
background-color: transparent;   // 透明 
background-color: rgb(255,0,0); //  红色背景 
background-color: #ff0000;  //  红色背景
background-color: red;    // 红色背景 
*/
2. background-image(背景图片)

background-image可以引入一张图片作为元素的背景图像。默认情况下,background-image放置在元素的左上角,并在垂直和水平方向重复平铺。

语法:background-image: url('图片地址')
当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到,或者不能完全铺满元素时,就会显示背景颜色。
3. background-repeat(背景平铺方式)

CSS中,当使用图像作为背景了以后,都是默认把整个页面平铺满的,但是有时候在很多场合下面,页面并不需要这种默认的效果,而可能需要背景图像只显示一次,或者只按照指定方式进行平铺的时候,可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式,一般有四个值:

默认是repeat(平铺)
no-repeat(不平铺)
repeat-x(X轴平铺)
repeat-y(Y轴平铺)
4. background-position(背景定位)

CSS中支持元素对背景图像的定位摆放功能,就是利用background-position属性来实现,以页面中元素的左上角为原点(0,0),把元素的内部区域当成一个坐标轴(上边框为X轴,越往左X的值越大,左边框为Y轴,越往下Y轴的值就越大,反之亦然),然后计算出背景图片的左上角与圆点的距离(x轴和y轴的距离),然后把背景图片放入到指定的位置上,对背景图片的位置进行精确的控制和摆放。
background-position的值分成两个,使用空格隔开,前面一个是背景图片左上角的x轴坐标,后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。

语法:background-position: x轴坐标 y轴坐标
背景定位的值除了是具体的数值以外,还可以是左(left)、中(center)、右(right)
5. background(背景样式缩写)

和字体属性一样,多个不同背景样式属性也是可以同时缩写的,不过不需要像字体那样按照一定的顺序,背景样式的缩写属性的顺序是不固定的,可以任意编排。

语法:background: 背景颜色  背景图片  背景平铺方式  背景定位;

标签:平铺,repeat,背景,CSS,background,背景图片,属性
From: https://www.cnblogs.com/zczhaod/p/17646187.html

相关文章

  • css单行垂直居中,超过两行显示省略号
    HTML:<div><span>单行居中,多行居左单行居中,多行居左</span></div><div><span>单行居中</span></div>CSS:span{font-size:14px;overflow:hidden;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;disp......
  • 8 CSS文本属性
    8文本属性font-style(字体样式风格)/*属性值:normal:设置字体样式为正体。默认值。italic:设置字体样式为斜体。这是选择字体库中的斜体字。oblique:设置字体样式为斜体。人为的使文字倾斜,而不是去使用字体库的斜体字。*/font-weight(字体粗细)/*属性值:normal:设置字体为正常......
  • SpringBoot复习:(41)配置文件中配置的server开头的属性是怎么配置到Servlet容器中起作用
    ServletWebServerFactoryAutoConfiguration类:可以看到其中使用了@EnableConfigurationProperties导入了ServerProperties而ServerProperties通过使用@ConfigurationProperties注解导入了配置文件中已server开头的那些配置项。可以看到ServletWebServerFactory定义了一个类型为Se......
  • CSS基础-定位
    CSS中通常使用position属性,决定元素的定位方式。常用的定位方式通常有值意义relative相对定位absolute绝对定位fixed固定定位相对定位position设置为relative。相对定位是元素相对于自己原来的位置通过使用top、left等属性进行移动,使其显示在新的位......
  • odoo 属性增改, 设置默认值, 设置子表默认值等
    <?xmlversion="1.0"encoding="utf-8"?><odoo><data><recordid="account_move_line_view_customize_form"model="ir.ui.view"><fieldname="name">account_......
  • odoo 修改属性
    https://www.lmlphp.com/user/63822/article/item/2434309/按条件隐藏:<xpathexpr="//group[1]"position="attributes"><attributename="attrs">{'invisible':[('uid_qx','=',False),('cust......
  • 7 CSS选择器优先级
    7选择器优先级所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。/*!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性1内联样式表的权值最高style=""1000;......
  • Asp.net Core Web API运行后返回的实体属性首字母全为小写(实际应该为大写)
    1、Asp.netCoreWebAPI项目运行后打开swagger,通过点击控制器下的方法,以此点击Tryitout-Execute,然后观察Responsebody中内容,发现所有的实体属性均为小写,如下图,但其实实际的实体属性值首字母为大写,如图二,出现这种情况的解决办法如下:  2、第一步:右键项目中依赖项-管理NuGe......
  • 5 CSS伪类选择器
    5伪类选择器anchor伪类:专用于控制链接的显示效果MoreActions:linka:link选择所有未被访问的链接。:visiteda:visited选择所有已被访问的链接。:activea:active选择活动链接。:hovera:hover选择鼠标指针位于其上的链接。<style>a:link{......
  • css 右上角标的效果
    右上角<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>制作角标的方法</title><scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></scrip......