分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

CSS背景说明及连写

发布时间:2023-09-06 02:34责任编辑:赖小花关键词:CSS

一、CSS背景说明

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

1.1 背景图片(image)

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

background-image : none | url (url) ;/*none :  无背景图(默认的)url :  使用绝对或相对地址指定背景图像 */
background:url("1.jpg") 0 0 no-repeat, ??????????url("2.jpg") 200px 0 no-repeat, ??????????url("3.jpg") 400px 201px no-repeat;/*这样写等价于:(若有重叠,后边的覆盖前边的)*/background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-repeat: no-repeat, no-repeat, no-repeat; ?background-position: 0 0, 200px 0, 400px 201px; ?

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

background-repeat : repeat | no-repeat | repeat-x | repeat-y ;/*repeat :  背景图像在纵向和横向上平铺(默认的)no-repeat :  背景图像不平铺repeat-x :  背景图像在横向上平铺repeat-y :  背景图像在纵向平铺 */

1.3 背景位置(position)
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。

background-position : length || length/*length : 百分数 | 由浮点数字和单位标识符组成的长度值(一般为px)。*/background-position : position || position /*position : top | center | bottom | left | center | right */

1.4 背景附着(attachment)
设置或检索背景图像是随对象内容滚动还是固定的。

background-attachment : scroll | fixed /*scroll : 背景图像是随对象内容滚动fixed : 背景图像固定 */

二、背景连写

background属性的值的书写顺序官方并没有强制标准的。

/*background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/background: #FFF url(image.jpg) repeat-y ?scroll 50% 0 ;

三、背景透明

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

background: rgba(0,0,0,0.3);/*最后一个参数是alpha 透明度 ?取值范围 0~1之间*/

CSS背景说明及连写

原文地址:https://www.cnblogs.com/fanbao/p/10503909.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved