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>
相关文章
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
250 91
|
15天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
95 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
24 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
24 2
前端基础(九)_CSS的三大特征
|
26天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
26天前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
40 2
|
29天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
14 1
|
29天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
22 1
|
29天前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
18 1
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
63 28