css中设置背景图像位置(CSS背景background)
css中设置背景图像位置(CSS背景background)
2024-11-08 10:01:13  作者:散場後愛  网址:https://m.xinb2b.cn/tech/vov449934.html

CSS 可以添加背景颜色和背景图片,以及来进行图片设置。

background-color 背景颜色background-image 背景图片地址background-repeat 是否平铺background-position 背景位置background-attachment 背景固定还是滚动背景的合写(复合属性) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景图片(image)

语法:

background-image : none | url (url)

参数:

none :  无背景图(默认的)

url :  使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

小技巧: 我们提倡 背景图片后面的地址,url不要加引号。

背景平铺(repeat)

语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数:

repeat :  背景图像在纵向和横向上平铺(默认的)

no-repeat :  背景图像不平铺

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x :  背景图像在横向上平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。


背景位置(position)

语法:

background-position : length || length​background-position : position || position

参数:

length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

position :  top | center | bottom | left | center | right

说明:

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意:

position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的,就是背景图片居中对齐了。

背景附着

语法:

background-attachment : scroll | fixed

参数:

scroll :  背景图像是随对象内容滚动

fixed :  背景图像固定

说明:

设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

导航栏案例

使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中。

<head> <meta charset="utf-8"> <style> body { background-color: #000; } a { width: 200px; height: 50px; display: inline-block; text-align: center; line-height: 50px; color: #fff; font-size: 22px; text-decoration: none; } a:hover { background: url(images/h.png) no-repeat; } </style> </head> <body> <a href="#">专区说明</a> <a href="#">申请资格</a> <a href="#">兑换奖励</a> <a href="#">下载游戏</a> </body>

  • 资金账簿印花税按什么报(资金账簿印花税)
  • 2024-11-08资金账簿印花税一、“资金账簿”印花税计税依据(一)“资金账簿”印花税计税依据为“实收资本”与“资本公积”两项的合计金额(二)企业启用新账簿后,其“实收资本”和“资本公积”两项的合计金额大于原已贴花资金的,就增加的部。
  • 女人有这五种表现 女人有这3种表现
  • 2024-11-08女人有这五种表现 女人有这3种表现伴侣之间的情感关系总是让人津津乐道,那么,怎么知道自己的另一半是否是真心爱自己呢?下面罗列了三种常见表现,一起来看看,自己的妻子/女友是否是真的爱你吧!1:女人撒娇,体现出对你的关心女人撒娇最明显的特。
  • 铅笔为什么叫铅笔(铅笔不含铅为什么叫铅笔)
  • 2024-11-08铅笔不含铅为什么叫铅笔铅笔芯不含铅,其主要成分是石墨十五世纪时,石墨矿被发现,当时的人并不知道石墨的成分,就称石墨为黑铅(blacklead)大约在1492年,英国开始有人使用石墨制成的笔,就称为铅笔铅笔(qiānbǐ,P。
  • 炸莲藕的做法大全(炸莲藕的做法介绍)
  • 2024-11-08炸莲藕的做法介绍做法一用料:藕、面粉、油、辣椒粉、胡椒粉、孜然粉、椒盐将藕切片,放入水里浸泡20分钟入锅焯水,再捞出沥水倒入面粉和水搅拌均匀,不可太稀拌入椒盐、辣椒粉和胡椒粉搅拌均匀,将藕片拌上面糊,锅里热油放入藕片。
  • 高考中外合作怎么报志愿(什么是中外合作办学)
  • 2024-11-08什么是中外合作办学导读:高考对于大部分人来说,都是人生中最重要的转折点高考后,很多学生和家长对于大学、专业及未来从事的职业知之甚少,无从下手,这导致他们在报志愿时,全凭感觉填报或者听取“过来人”的意见专业的选错,可能造。
  • 新生儿户口办理问题(关于新生儿上户口)
  • 2024-11-08关于新生儿上户口立警为公执法为民新生儿上户口所需材料:小孩父母夫妻双方的,身份证、户口页、结婚证、小孩出生医学证明(临时出生证明需要去小孩出生医院换领正式出生医学证明),有必要的可以把上述材料各复印一份,然后去户籍所。
  • 怎么解决led灯微亮的问题(每天一个电气小知识)
  • 2024-11-08每天一个电气小知识LED灯具晚上关灯后微亮的主要原因和解决方法现阶段,LED因其节能省电、亮度高、寿命长等优点,已经全面取代了卤素和荧光光源LED光源激发电流小,对电压和电流相当敏感,使用中会因为各种复杂原因造成感应发。
  • 祝无双演了几集(妈妈专业户祝无双)
  • 2024-11-08妈妈专业户祝无双相信不少人都看过《武林外传》这部热播剧,里面的每个角色都有不同的魅力,是自己人生中的主角,不管多少年,这部剧都是经典,无法超越《武林外传》属于当时的第一部古装轻喜剧,编剧宁财神说:别把观众当傻子,要把。
  • 日本青少年近视率(青少年近视矫正方法)
  • 2024-11-08青少年近视矫正方法最近有新闻报道,临床发现孩子早期近视率逐年提高,已经出现了2岁孩子近视300度,6岁孩子近视1400度的案例现在儿童近视的特点是,从2、3岁开始近视,3到4岁特别敏感,8到12岁发展最迅速青少年近视的。
  • 上交所带动资本市场全面深化改革(建设数字智能型)
  • 2024-11-08建设数字智能型上交所探索建设“数字智能型”交易所华为供图中新网上海8月25日电(高志苗)1990年,上海证券交易所诞生于黄浦江畔,是中国资本市场的起点30多年来,上交所已拥有股票、债券、基金、衍生品四大类证券交易品。
  • 输卵管积水应该怎样治疗(输卵管积水怎样治疗好)
  • 2024-11-08输卵管积水怎样治疗好  #什么是输卵管积水#输卵管性疾病导致的不孕约占女性不孕症的三分之一,其中输卵管积水约占输卵管性不孕的十分之一输卵管积水影响精子和卵子在管腔内的游动,阻碍受精,引发女性不孕症那输卵管积水产生的原因,。