网页制作之CSS背景属性

  • 时间:2018-11-14 23:20 作者:小牛试讲 来源:小牛试讲 阅读:286
  • 扫一扫,手机访问
摘要:视频加载中...1、 css背景属性列表 background 简写属性,作用是将背景属性设置在一个公告中 background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-

视频加载中...

1、 css背景属性列表

background

简写属性,作用是将背景属性设置在一个公告中

background-color

设置元素的背景颜色

background-image

把图像设置为背景

background-position

设置背景图像的起始位置

background-repeat

设置背景图像能否及如何重复

background-attachment

背景图像能否固定或者者随着页面的其他部分滚动

2.background-position详解

方法一:使用少量关键字,如top bottom left right center,通常这些关键字会成对出现。其作用如其名称所标明,例如:top right将背景图片定位于元素的右上角。根据规范,位置关键字可以按任何顺序出现,只需保证不超过两个关键字——一个对应水平方向,另一个对应垂直方向。假如只出现一个关键字,则认为另一个关键字是center。

方法二:使用百分数值,百分数值的体现方式更为复杂。假设希望用百分数值将图像在其元素中,这很容易background-position:50% 50%等价于background-position:center,其中心与元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说图像的中心点与元素的中心点对齐。

注意:假如使用值,第一个值代表水平方向,第二个值代表垂直方向。

思考:background-position:0% 0%与background-position:100% 100%的显示效果为什么?

Background-position:66% 33%

注:background-position的默认值为0% 0%,在功能上相当于top left,这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺。并且百分比与关键字相同,都是元素某个点与背景图片某个点的对齐。

方法三:长度值,长度值解释的是元素内边距距左上角的偏移。偏移点是图像的左上角。假如。设置值为50px 100px,图像的左上角将在元素内边距区左上角向右50px,向下100px的位置上。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部