CSS背景图片与CSS精灵

原创 已于 2022-11-04 11:22:48 修改 · 1.1k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cknow-ai 大脸胖柴

cknow-ai 关注

标签
#css #css3 #前端
分类 前端开发
于 2022-03-07 23:55:46 首次发布
本文详细介绍了CSS中的背景属性，包括background-color、background-image、background-repeat、background-position、background-size、background-attachment、background-origin以及背景图片的旋转。重点讲解了如何通过CSS精灵技术来提高网页加载速度，探讨了CSS精灵的优点和缺点。此外，还提供了CSS精灵生成器的网址，帮助开发者更有效地管理背景图片。

目录

一、背景颜色

1、background-color 属性指定元素的背景色。

二、background-image 背景图片

1.给页面添加图片背景

注意：背景图片不显示的几种情况

2.background-repeat 背景平铺方式 

3.background-position    背景图片位置 

4.background-size 背景图片的大小 

5. background-attachment 背景图片是否固定

6.background-origin 渲染位置 

8.背景图片旋转

二、CSS精灵 （难点）

一、背景颜色

1、background-color 属性指定元素的背景色。

body {
  background-color: blue;
}
 
/*为页面指定一个蓝色背景*/

二、background-image 背景图片

1.给页面添加图片背景

值：url（"图片路径"）

注意：背景图片不显示的几种情况

  1. 在外链式css文件中设置背景图要以当前css文件位置路径为参考，不可以html文件做参考路径
  2. 且ajax请求数据图片在css文件中无法访问数据，在html内设置行内样式即可
background-image: url(图片路径.jpg);

也可以同时添加多张图片：

background-image: url(图片1.jpg),url(图片2.jpg)，...;

2.background-repeat 背景平铺方式 

值解释
repeat默认 水平垂直都平铺
no-repeat不平铺
repeat-x水平平铺
repeat-y垂直平铺

1. background-repeat: repeat; /* 背景图片的平铺方式 默认水平垂直都重复 */
2. background-repeat: no-repeat;/* 背景图片不重复 */
3. background-repeat: repeat-x; /* 背景图片水平重复 */
4. background-repeat: repeat-y;/* 背景图片垂直方向重复 */ 

3.background-position    背景图片位置 

值：x轴坐标 y坐标

        也可以分开写：

background-position-x:0; /*x坐标为0*/
background-position-y:0; /*y坐标为0*/

 x，y取值：可以数值+单位 或  百分比  或 英文单词

	background-position：left top ;/*左上 */
	background-position：right bottom;/*右下*/
	background-position：center; /*水平垂直都居中*/
	background-position：50% 0；/*水平居中*/
	background-position：50%； /*水平垂直都居中*/
	background-position：0% 100%; /*左下*/

4.background-size 背景图片的大小 

（1）width height 设置图片的宽和高，一般只设置一个，否则可能会造成变形。

（2）contain 包含 把背景图片等比例扩展至最大尺寸，以使它的宽和高适应整个背景区域 可能背景区域有留白。

（3）cover 覆盖 把背景图片等比例扩大至足够大，以使它铺满整个背景区域可能会使图片裁剪

background-size: 500px;
background-size: 50%; /* 容器的50% */
background-size: 100%;
background-size: contain;  
/*  包含 把背景图片等比例扩展至最大尺寸,以使背景图片的宽度或高度适应背景区域, 可能背景区域有留白 */
background-size: cover;  
/*  覆盖 把背景图片等比例扩大至足够大,以使背景图片铺满整个背景区域, 可能使图片裁剪 */

5. background-attachment 背景图片是否固定

（1）scroll 默认 背景图片随页面滚动

（2）fixed 背景图片固定不动

background-attachment: fixed; /* 固定不动 */
background-attachment: scroll; /* 默认 背景图片随网页滚动 */

6.background-origin 渲染位置 

background-origin: padding-box; /* 从内边距的padding位置渲染 */
background-origin: content-box; /* 从内容区域渲染 */
background-origin: border-box;/* 从border位置渲染 */

7.简写方式

background : bg-color值    bg-image值   bg-repeat值   bg-position值 / bg-size值   bg-attachment值 ；

除bg-position值 / bg-size值外 其余没有先后顺序  例如：

background: #FF0000 url(images/pj2.jpeg) no-repeat 50% 20% / 500px scroll;

8.背景图片旋转

-moz-transform:rotate(180deg); 
 -webkit-transform:rotate(180deg);
transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

上面代码是让背景图片旋转180度

如果希望向右旋转90度 就把上面代码中的180deg改成90deg，最后一行rotation=1

如果希望向左旋转90度 就把上面代码中的180deg改成-90deg，最后一行rotation=3

二、CSS精灵 （难点）

网址分享：CSS精灵生成器 

        CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。这样的话，当页面渲染时，可以减少请求次数，在一定程度上能够加快网页加载速度。

CSS Sprite Generatorhttps://css.spritegen.com/

1. 简述
        css精灵（CSS Sprites）是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2. 优点
1. 在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
2. 减少了图片的字节，资源利用率高。
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要4. 对每一个小元素进行命名，从而提高了网页的制作效率。
5. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。效率高。

3.缺点
1. 在图片合并的时候，需要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；如果是在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂；
2. CSS精灵在开发的时候比较麻烦，你要通过工具测量计算每一个背景单元的精确位置，很繁琐；
3. CSS精灵在维护的时候比较麻烦，如果页面背景有少许改动，一般就要重新修改这张合并的图片。

点赞 点赞 1
评论 0
书签 书签 1
CSS背景旋转效果的实现方法
ByteProwl的博客
09-23 1240
在上面的代码中，我们设置了元素的宽度和高度，并使用background-image属性指定背景图片的URL。在CSS中，我们可以使用transform属性来实现元素的旋转效果。如果想要旋转整个背景，可以通过创建一个包含背景的元素，并将其旋转。保存文件并在浏览器中打开，您将看到具有旋转背景效果的元素。可以使用一个div元素，并给它一个特定的类名或ID，以便在CSS中进行选择。请注意，上述代码中的’your-background-image.jpg’应替换为您自己的背景图片的URL。步骤 2：编写CSS样式。
运用CSS伪类与属性，巧妙实现背景图片旋转效果
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-08 4465
第一想到的是通过设置css3样式的transform: rotate(-45deg)。开发的时候遇到需要将背景图片旋转-45度。所以把背景图放到伪类中进行旋转就可以完美解决这个问题了。但是发现内容也跟着旋转了。UI给的图片是正的。
CSS 实现背景图片旋转
Mr.小灰狼_随笔
08-12 9643
CSS 实现背景图片旋转 只让背景图片 旋转180度 的示例 开发的时候有个图片用背景图要旋转一定角度 如果只给 .question 添加背景 ， 通过 CSS3 的 transfrom rotate 肯定是会影响文字的展示。 所以把 背景图 放到 伪类 中进行 旋转 就可以完美解决这个问题了...
实战指南：利用jsEncrypter联动本地JS，爆破前端自定义加密密码
最新发布
weixin_30239339的博客
05-17 751
本文详细介绍了如何利用jsEncrypter插件联动本地JS，破解前端自定义加密密码的实战方法。通过识别加密算法、配置PhantomJS环境、与Burp Suite联动爆破等步骤，帮助渗透测试人员有效应对自定义加密场景，提升密码爆破效率。
手机拍照上传图片，在background-image配置中，旋转90度
newBunny的博客
04-23 4377
修改方式是用img的src引入图片； 想达到background-size:cover效果； | 可以使用object-fit: cover实现相同效果； 具体object-fit介绍，先mark，深入待续…… 在刚拿到这个问题的时候，我直接取oos云端看我的图片，发现竖屏拍照的图片是横向显示，我初步把问题定位在oos上传带着exif参数了（传图时拍照的图片会带exif参数，里面的Or...
CSS3只让背景图片旋转180度
qq_43958325的博客
02-04 2万+
CSS3旋转背景图片一、心路历程二、代码实现 一、心路历程 最近写驾驶舱的时候琢磨了一个问题，就是单纯的使背景图片旋转的一定的角度。 只通过CSS3的transfrom让整个容器都翻转了一定的角度，达不到我想要的效果。 然后通过研究和参考相关文章总算实现了这个效果，话不多说，上代码。 二、代码实现 HTML模板如下 <div class="smart_development_right"> <div class="smart_development_content">
css背景图片的练习、精灵图
在线学习web前端开发教程
12-19 748
一、背景图片练习 解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。 总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了 <!DOCTYPE html> <html lang="en"> <head> <met...
html css背景图片精灵技术,13-CSS基础-背景和精灵图
weixin_42527401的博客
06-08 408
背景相关属性背景颜色如何设置标签的背景颜色?在CSS中可以通过background-color:属性设置标签的背景颜色取值:具体单词rgbrgba十六进制格式:div{width: 100px;height: 50px;}.box1{background-color: red;}.box2{background-color: rgb(0,255,0);}.box3{background-color...
web——CSS精灵图（背景图、定位背景图片background-position属性）
weixin_44652589的博客
04-16 1611
web——CSS精灵图（背景图、定位背景图片background-position 属性）一、background-position属性二、实例 一、background-position属性 例如下图，若我们只需显示其中一部分 我们可以设置一个div，并设置如下两个属性 background-image: url(opera.jpg); //背景图片 background-position: -498px -0px; //背景相对移动的距离 注意：background-position: -498p
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
weixin_36400512的博客
06-08 349
33-背景色彩1.如何设置标签的背景色彩?在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值:具体单词rgbrgba106进制快捷键:bc background-color: #fff;34-背景图片1.如何设置背景图片?在CSS中有1个叫做background-image: url();的属性, 就是专门用于设置背景图片的快捷键:bi backgrou...
html怎么将背景图片旋转,css怎么旋转图片？
weixin_27923353的博客
06-04 4006
在网页中我们经常会用到旋转图片等问题，我们该如何使用css设置图片旋转效果呢？今天教大家如何用CSS在HTML做出图片旋转的效果，图片的任意角度都可以旋转。css设置图片旋转效果可以使用css3的transform属性，transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transform属性：使用语法：transform: none|transform...
css实现图片旋转
qq_34631220的博客
06-08 2万+
css实现图片旋转
css background 旋转_CSS动画之transform
weixin_31902781的博客
12-23 1721
CSS 的transform属性用来给元素添加一些变形效果，主要包括改变元素的位置或形状，同时不影响页面的布局。使用transform我们可以实现一些非常炫酷的效果，比如纯CSS实现的钟表、立方体的旋转等，以提升用户体验。平移translate使用平移translate可以改变元素的位置。可选值有：translateX()：元素沿着 x 轴方向平移；translateY()：元素沿着 y...
CSS循环旋转图片
2301_80221580的博客
11-01 1643
使用纯CSS以及CSS+JavaScript两种方式，对图片进行类似于网易云唱片旋转功能实现。
css使背景图片旋转
热门推荐
眼前一座山，踏平它
05-02 5万+
因为遇到问题所以去查找问题，css3
css 背景图旋转 只让背景图片旋转180度的实现示例
时间在飞飞的博客
08-25 2万+
.des-item-7 .inner-box .question{ position:relative; font-size: 16px; font-family: CenturyGothic; font-weight: 400; color: #000000; cursor: pointer; } .des-item-7 .inner-box .question::after{ content:''; .
html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
weixin_35828992的博客
06-02 573
需求背景使用 vue 做的项目，业务需求有一个拼图效果，默认是深色的背景图，上面分五个区域，每次会亮一个区域，整张图都亮，拼图完成。先来看一下最终的效果图。应用到的知识点：background-sizebackground-positiontransform：rotate实现思路：外层大盒子用来放暗色背景图，里面的5块拼图，是5个div，每块拼图都使用背景定位的方式展示背景图的固定区域，中间的拼图...
css学习总结（1）background之background-image
萧墨的博客
03-26 2382
1. 移除背景图片background-image: none;2. 通过url引用图片background-image: url(/images/jt.png);也可以是远程连接：background-image: url(www.xxx.com/images/jt.png);3.  linear gradient(线性渐变)线性渐变接收三个参数，第一个参数代表方向，例如：background-...
background 旋转_CSS 旋转的铁球
weixin_36393352的博客
12-01 849
整体分为了，线、圆、框、柱、盘几个部分，通过位移、旋转进行组合，考察学生使用 CSS 进行变换的基本操作！HTML 部分<body> <!-- 背景 --> <video src="./v.mp4" autoplay muted></video> <!-- 包裹 --> <div class="wra...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值