当前位置：网站首页 > 技术文章 > 正文

CSS基础知识(七)CSS背景

myzbx 2024-12-02 22:39 16 浏览

一、CSS背景属性

1.背景颜色（background-color）

属性值：transparent(透明的)或color(颜色)

2.背景图片（background-image）

属性值：none(没有)或url(使用绝对或相对地址指定背景图像)

优点：非常便于控制位置（精灵图也是一种运用场景）

3.背景平铺（background-repeat）

属性值：repeat|no-repeat|repeat-x|repeat-y

背景图片会压住背景颜色

4.背景图片位置（background-position）

background-position：x y;

x坐标和y坐标可使用方位名词或精确单位
方位名词
a. x可为left | center | right ,y可为top | center | bottom
b. top left 和 left top 效果一致（与顺序无关）
c. 若只指定一个方位名词，另一个值忽略，则第二个值默认为居中对齐
精确单位
a.先x坐标后y坐标
b.若只指定一个值，则为x,另一个值为垂直居中
混合单位：若混合使用，第一个值为水平x,第二个值为垂直y

5.背景图片固定（background-attachment）

属性值：scroll（随内容滚动）|  fixed（背景固定）

6.背景复合写法（background）

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

7.背景色半透明（CSS3提供了背景颜色半透明的效果）

background：rgba(0,0,0,.3);
red green blue alpha(透明度范围0~1）
习惯把0.3的0省掉
背景半透明是指盒子背景半透明，盒子里面的内容不受影响

HTML 属性

上一篇：每个前端开发需要了解的15个强大的CSS属性
下一篇：CSS必知|重点属性media|实践技巧|温故知新

相关推荐

SUS631化学成分特性及适用范围（sus316的材料成分）: sus631特性及适用范围：添加铝的沉淀硬化型钢种，用作弹簧、热圈及计器部件。sus631/17-7PH/S17700/0Cr17Ni7Al沉淀硬化型不锈钢日本SUS631(17-7PH国标0Cr17...

4年仅掉价不到3成!这辆45万的奥迪S5纯素车，值不值得买?: 哈喽~大家好，检车家老司机又和你们见面啦！我是你们的老朋友建国，我曾是一枚修过7年车的汽车修理工，现在是一名专业的二手车检测技师，更是一枚事故车劝退师。欢迎收看本期二手车检测趣事，今天给大家带来的车型...

新旗舰什么样?7张图全方位预测三星Note4: 夏天已经快结束了，这也就意味着今年上半年的重磅机型已经悉数发布完毕，我们先要做的就是过一段平淡的日子然后期待着下半年的重磅产品陆续登场。三星GALAXYNote4无疑是下半年最值得我们期待的机型之一，...

拍照为主兼顾视频，将来可能接单，索尼a7m3和松下s5怎么选?: 最近有小伙伴问了我下面这么一个问题。想买一台全画幅微单，但是预算有限，看好了两款机型，他的问题是：拍照为主兼顾视频，将来可能接单，索尼a7m3和松下s5怎么选？这个问题，我就想到这个网友也是做过一些功...

GolangWeb框架Iris项目实战-JWT和中间件(Middleware)的使用EP07: 前文再续，上一回我们完成了用户的登录逻辑，将之前用户管理模块中添加的用户账号进行账号和密码的校验，过程中使用图形验证码强制进行人机交互，防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Tok...

对焦大提升!松下S5M2 3.0固件&S5M2X 2.0固件详细测试: 前段时间，松下发布了最新的S5M2和S5M2X的固件，并且这是一个比较大的更新，对对焦性能、防抖性能有较大提升，还新增了录制代理文件以及预连拍功能。这都是超级实用的功能，松下不愧是固件大厂！自动对焦升...

三星Galaxy S5安卓5.0测试版曝光，总算好看点了: 三星GalaxyS5安卓5.0测试版曝光，总算好看点了出处：IT之家原创（远洋）2014-10-3123:11:04评论IT之家报道，显然，三星正在将自家的TouchWiz用户界面适配谷歌最...

松下S5M2对焦变换功能讲解#松下相机: 大家好，今天和大家分享松下相机一个非常好用的功能：对焦变换。这个功能通常用于近景的视频拍摄，比如像现在画面里出现的人偶、象棋，看到视频的对焦点非常平顺的依次从画面的上方移动到中间，再移动到靠下的位置。...

松下 S5M2的几个重要功能(拍照篇) 松下 S5M2的几个重要功能: 赶在618结束之前，我来讲几个松下S5二代的重要功能，也许其中的某一项功能会成为你购买它的理由。·首先来讲一讲高分辨率模式，这是一个非常好用的功能。使用松下S52代的左边波轮，可以直接进入这个模式。进...

奥的斯电梯OTIS DCSS5-E门机自学习详细过程: 奥的斯电梯DCSS5-E门机自学习详细过程1.将轿顶打检修2.插入TT时按“M”键，提示你按“3”键，按“3”3.关键一步，因为怕你误操作而更改门机运行曲线和重要参数，正常情况下你是看不到第三个菜单的...

玩转smardaten | 逻辑编排很难吗?看无代码平台操作: 1、前言不知道各位小伙伴有没有使用过无代码软件平台的经历呢？有没有想过你可以通过简单的拖拽就能构建和部署强大的应用程序？简单地说，smardaten无代码系统使任何人都能够开发软件，无需高深的开发知...

关于编码的那些事 - URL 编码（url编码的作用）: 作者：redmed背景Web项目中经常会遇到处理URL中Query的情况，来看下下面问题你有疑惑吗？项目中发现会用到qs、query-string、URLSearchParams、甚至q...

国服一周数据观察:新英雄千珏胜率不足50%: 随着千珏的更新，5.20版本到现在已经有一周的时间了，这段时间我们的排位赛数据有什么变化呢?快来看下排位赛数据分析。选择率最高的英雄榜单与过去的变化不大，仍然是盲僧、薇恩和赵信荣登榜首。但这不代表这些...

iPhone系列领跑消费者最喜爱拍摄设备名单: 现在连GalaxyS5都被iPhone4s，iPhone4这类老机型压在后面，由此可见苹果的产品比起三星真是畅销太多了。国外著名图片分享网站Flickr，今天公布了2015年用户们最喜欢使...

Galaxy S6图像处理性能不如iPhone6 Plus?: 三星最近公布了旗舰机GalaxyS6，有许多人批评、褒奖，但更常拿来跟iPhone6比较（明明不同系统阿？），而这次又有报告指GalaxyS6的「图像处理」不如iPhone6Plus，究竟是...

一周热门

最近发表

首页
收录
顶部