返回

从零开始学前端

#知识库
#拓展知识
68%
进度
0/11
知识点
0
笔记
概述
HTML CSS 概念初识
HTML的基本认识
CSS 的基本认识
学习前的准备工作
HTML 基础入门
HTML 的语法认识
HTML 的框架标签
HTML 的内容标签
HTML 的布局标签
CSS样式表初识
CSS 的标准应用语法
CSS的引用方式
选择器的多种使用方法
CSS的盒模型认识
标签的宽和高尺寸
CSS 常用属性的应用规则
文字属性
色彩/图片属性
排版定位
动画效果
其它常见样式类型
网站前端布局实例
HTML样式的语法
CSS 全局预设
顶部样式定义
内容样式定义
首页知识库知识库从零开始学前端

色彩/图片属性

UX百科编辑部 编辑于 2024-01-0720人正在学
00

前面为了展示模块实际区域,我们应用过很多次 background 属性来定义背景色,相信大家已经有所了解。但是,background 的作用可不仅仅只是定义背景色而已,它包含:

  • background-color:定义背景色的属性
  • background-image:定义背景图片的属性,使用 “url ( img/logo.png )”  的方法
  • background-position:定义背景图片的x、y轴距离标签左上角的距离
  • backgorund-repeat:定义图片重复的规则

背景色我们已经知道,关键就在背景图的使用上。比如淘宝中包含了各种酷炫的图片,虽然多数图片是内容图,但是,也有少部分图片是网站本来的基础设计内容之一,也就是——切图。

比如在上图案例中,右上角个人头像卡片的底图,就是页面切图元素,这种图片的引用,并不是通过 image 标签来完成的,而是通过设置 background 属性来完成。

换句话说,我们通过长宽制定了一个矩形区域,然后对这个矩形区域采取类似 Sketch 填充中的图片填充。

而如果填充图片本身的尺寸和定义的矩形尺寸不同,我们就可以通过 background-postion 属性来设置它的位置,可以是指定 x y 轴距离,也可以使用居中的方法:

除了直接定义一张完整的图片外,background 还有个特别有用的设置,就是重复属性。比如我们要定义一个整屏宽的背景,要使用渐变色,那么我们就可以调用一个1像素宽的图片背景,然后让它水平方向平铺:

在正常情况下,background 属性是默认 x、y 轴都有 repeat 的平铺效果,所以如果不想出现重复,就可以添加 no-repeat 值。

背景属性的应用,就是我们网站设计稿切图进行实现的具体步骤之一,和设计师有密切的关联,值得大家更深入的去认识。

点赞
收藏
学会
6180020
下一篇: 排版定位
如果我们通过浏览器的检查功能去查看界面的框架,就会发现实际上一个完整的网页是由无数矩形拼接起来的,我在自己的教学中为了方便大家理解称其为 —— 矩阵视图。 要把这些矩形框架合理搭建起来,就需要应用到定位相关的属性,来控制它们的顺序和位置,主要应用到的属性包含下面几个: position:定位类型设置...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞