16、前端开发:CSS知识总结——背景及雪碧图的用法

简介: 16、前端开发:CSS知识总结——背景及雪碧图的用法

1、背景相关属性用法

1).background-image  设置背景图片


       -语法:background-image:url(相对路径);


2).background-repeat  设置背景图片的重复方式


       可选值:


               repeat,默认值,双方向重复平铺;


               no-repeat,不重复,有多大显示多大;


               repeat-x,背景图片沿水平方向重复;


               repeat-y,背景图片沿垂直方向重复;


3).background-position  调整背景图片在元素中的位置,默认是贴着左上角显示


       用top  right  left  bottom  center设置偏移量~px


4).background-clip  设置背景色的范围


       可选值:


               border-box  默认值,背景颜色出现在边框下边


               padding-box  背景不会出现在边框,只会出现在内容区和内边框


               content-box  背景只出现在内容区


5).background-orgin  设置背景图片的范围


       设置背景图片额偏移量计算的原点,配合偏移量使用


       可选值:    


               border-box  从边框开始计算偏移量


               padding-box  从内边距开始计算偏移量


               content-box  从内容区开始计算偏移量


6).background-size  设置图片的大小


       参数:第一个值(宽度)     第二个值(高度)


       如果只写一个,第二个值默认为auto


 按图片比列给宽高效果图如下



5.png



     


cover  图片的比例不变,将元素铺满,效果如下


4.png


contain  图片比例不变,将图片完整显示


1.gif

2、雪碧图

       图片整合技术:将多个图片整合为一张图片,提高了请求速度,访问效率和用户体验


       使用步骤:


先确定要使用的图标

测量图标的大小

根据测量结果创建一个元素

将雪碧图设置为元素的背景

设置一个偏移量,以显示正确的图片

<style>
    .box1{
        width:175px;
        height:45px;
        border:1px solid red;
        background-image:url(绝对路径);
        background-position:10px  100px;
    }
</style>
<div class="box1"></div>
相关文章
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
33 4
|
1月前
|
前端开发
常见 CSS 选择器用法
常见 CSS 选择器用法
37 1
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
276 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
75 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
40 2
前端基础(九)_CSS的三大特征
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
77 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
29 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
25 1
|
2月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
23 1