html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩
1.如何设置标签的背景色彩?
在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的
取值:
具体单词
rgb
rgba
106进制
快捷键:
bc background-color: #fff;
34-背景图片
1.如何设置背景图片?
在CSS中有1个叫做background-image: url();的属性, 就是专门用于设置背景图片的
快捷键:
bi background-image: url();
注意点:
1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也能够是网络的地址
2.如果图片的大小没有标签的大小大, 那末会自动在水平和垂直方向平铺来填充
3.如果网页上出现了图片, 那末阅读器会再次发送要求获得图片
35-背景平铺属性
1.如何控制背景图片的平铺方式?
在CSS中有1个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
取值:
repeat 默许, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
快捷键
bgr background-repeat:
利用场景:
可以通过背景图片的平铺来下降图片的大小, 提升网页的访问速度
36-背景定位属性
1.如何控制背景图片的位置?
在CSS中有1个叫做background-position:属性, 就是专门用于控制背景图片的位置
2.格式:
background-position: 水平方向 垂直方向;
3.取值
3.1具体的方位名词
水平方向: left center right
垂直方向: top center bottom
2.2具体的像素
例如: background-position: 100px 200px;
记住1定要写单位, 也就是1定要写px
记住具体的像素是可以接收负数的
快捷键:
bp background-position: 0 0;
注意点:
同1个标签可以同时设置背景色彩和背景图片, 如果色彩和图片同时存在, 那末图片会覆盖色彩
37-背景缩写
1.背景属性缩写的格式
background: 背景色彩 背景图片 平铺方式 关联方式 定位方式;
快捷键:
bg+ background: #fff url() 0 0 no-repeat;
2.注意点:
background属性中, 任何1个属性都可以被省略
3.甚么是背景关联方式?
默许情况下背景图片会随着转动条的转动而转动, 如果不想让背景图片随着转动条的转动而转动, 那末我们就能够修改背景图片和转动条的关联方式
4.如何修改背景关联方式?
在CSS中有1个叫做background-attachment的属性, 这个属性就是专门用于修改关联方式的
格式
background-attachment:scroll;
取值:
scroll 默许值, 会随着转动条的转动而转动
fixed 不会随着转动条的转动而转动
快捷键:
ba background-attachment:;
38-背景图片和插入图片区分
1.背景图片和插入图片区分?
1.1
背景图片仅仅是1个装潢, 不会占用位置
插入图片会占用位置
1.2
背景图片有定位属性, 所以可以很方便的控制图片的位置
插入图片没有定位属性, 所有控制图片的位置不太方便
1.3
插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那末推荐使用插入图片
40-CSS精灵图
1.甚么是CSS精灵图
CSS精灵图是1种图象合成技术
2.CSS精灵图作用
可以减少要求的次数, 和可以下降服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)相关推荐
- css动画使用背景图片卡顿_CSS入门学习笔记(二):布局与定位
在CSS学习使用的过程中有一个方法可以检验出自己的错误,那就是border大法! 图片素材网站:wall haven: 透明属性:background-color:rgba(0,0,0,0.5) ba ...
- webpack:js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理 依赖包降级处理 ...
- css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
- 五、pink老师的学习笔记——CSS精灵技术(sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
- php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
- CSS入门学习笔记(案例+详解)
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- HTML及CSS学习笔记 13 - 背景
本文是HTML及CSS课程的第十三课.主要介绍和页面背景相关的CSS样式属性,如背景颜色.背景图片.背景图片平铺方式等等 文章目录 一.web中的图片 1.web中常见的图片格式 1.1.JPEG 1 ...
- 背景图片hover加蒙层_用hover怎么将li的背景图片变透明,文字不变,是背景图片,不是img插入...
匿名用户 1级 2017-01-19 回答 1. h3,ul,li{ margin:0;无外补丁 padding:0;无内补丁} 2. ul,li{ list-style:none; 无列表样式} 3 ...
- Ubuntu18.04.5深度定制主题,修改背景图片壁纸开机动画,完美去掉默认背景紫色
Ubuntu18.04.5深度定制主题,修改背景图片壁纸开机动画,完美去掉默认背景紫色 问题描述 修改后的效果 详细操作步骤 0. 准备图片 1. 修改背景:grub引导启动界面(一般系统不显示可跳过 ...
最新文章
- VS2015 Qt5
- 搜狗发布全球首个手语AI合成主播,用技术造福听障人群
- springboot:自动配置原理入门
- XDocReport 的简单使用 操作word 替换变量,动态图片,指定操作指令(程序)扩展(转自:http://www.cnblogs.com/fish-in-sky/p/4973237.html)
- Linux服务器编程之:truncate()函数+案例说明
- 如何让手游内存占用更小?从内存消耗iOS实时统计开始
- 图片合成gif_使用在线图片工具处理静态和动态图片的技巧
- 安全删除U盘时,遇到提示“无法停止‘通用卷’设备时解决方法
- gym100825G. Tray Bien(轮廓线DP)
- 面试系统设计_系统设计面试问题–您应该知道的概念
- 44 万条数据揭秘:如何成为网易云音乐评论区的网红段子手?
- poj1562-DFS
- Linux常用命令参考手册02
- PHP字符串替换函数strtr()的功能实现讲解
- x的平方加y平加xy的java语言_面试被虐题:说说 JVM 系语言的函数式编程
- 摄像机和镜头的基础知识
- docker镜像的获取删除和查看镜像信息历史记录清理残余镜像
- 五大主流浏览器及四大内核1
- JS根据日期计算年龄
- RDF(Resource Description Framework)
热门文章
- AI 框架部署方案之模型部署概述
- 单摄像头+深度学习实现伪激光雷达,代码已开源
- 李飞飞团队最新研究,真实场景中识别物体具体属性,连表面纹理都识别出来了...
- 30~60万|项目需求——胳膊与手指的动态识别技术
- 机器人抓取领域性能评估标准
- 插入u盘计算机未响应,win7系统插入u盘死机怎么办|win7插入u盘无响应的解决方法...
- webpack 安装使用(1)
- linux命令行模式连接网络,centos命令行模式连接无线网络的过程
- php的udp数据传输,python实现udp数据报传输的方法
- python与mongo_MongoDB与Python的交互