css多背景处理小例子

最新推荐文章于 2022-03-17 22:42:28 发布
最新推荐文章于 2022-03-17 22:42:28 发布
阅读量183 收藏
点赞数 1
分类专栏： 前端文档分享 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42786011/article/details/105436638
版权

css多背景小例子

简介

项目都讲究性能优化，页面的渲染速度和加载的样式表，js文件，图片等等，我们所写页面的背景大都有图片组成，如果图片很大就会导致页面加载慢，给用户带来不好的体验。而css3多背景处理可以很好的优化图片过大这个令人头疼的难题。

背景图1.65M很大，可能影响页面性能。

在这里插入图片描述

用ps软件把背景图切割成几块，每个只有几百K

在这里插入图片描述

然后css background属性可以添加多个url，通过定位来处理。

在这里插入图片描述

页面打开后，多背景css已经挂载上

在这里插入图片描述
感谢赏阅！

将慧圣
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS背景实例
xuanmu
02-10 261
1 #设置页面的背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> body { background-color:#b0c4de; } </style>...
css3实现一个div设置多张背景图片及background-image属性实例演示
09-27
主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
CSS 背景实例
weixin_34268579的博客
03-21 63
1、设置背景颜色 background-color:yellow background-color:#00ff00 background-color:rgb(250,0,255) 2、将图像设置为背景 background-image:url(/images/.jpg); 3、重复背景图像 background-image：URL(); background-r...
css3多重背景小案例
qq_42181069的博客
05-21 666
     关于多重背景这个css3中很常用的属性，本来没什么可以详细拿出来讲的，但是，昨天，是我们一年一度的520，以及今天是一年一天的521，我这个和代码一起过的小仙女，有脾气了~~~~所以拼个图，来表达一下我此时此刻的心情，效果图如下：代码如下：1、css部分：注意一下多重背景的写法就行，只有一个background,图片的话大家可以自己去找好看的，然后就是中间嵌入的图片要找好坐标，大家可以自...
CSS3实例分享之多重背景的实现(Multiple backgrounds)
weixin_30443731的博客
09-25 138
CSS3的诞生为我们解决了这一问题，在CSS3里，通过background-image或者background可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块元素里。 首先我们来看一下语法吧： background ： [background-image] | [background-origin] | [background-clip] | [background-re...
CSS3之多背景background使用示例
12-13
CSS3中新加了多背景这个属性，和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了。在CSS3中多背景的使用是非常常见的，所以，这个多背景的属性应用很普遍的，所以掌握CSS3之多背景background是当务之急呀。 一、background的语法 1、background的分写 复制代码代码如下: background-image: [background-image], [background-image], [background-image]; background-position: [background-position], [background-posit
CSS3--有趣的背景小案例
小白小白从不日别的博客
07-13 187
公共部分： body { background-color: yellow; } .c1 { height: 90px; } <div class="c1"></div> <div class="c2"></div> A： .c2 { h.
HTML+CSS实现漂亮的背景实例
09-25
网页背景色与大海融为一体，这个是非常唯美的艺术效果，设置了background-position:top;背景图片在水平居中，垂直靠上的位置开始水平平辅，这两条线痕，则成了内容的左右边框
css背景属性举例,CSS背景属性5个应用实例
weixin_39661345的博客
08-04 165
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。CSS背景属性5个应用实例。背景(background)在项目中经常会使用。...
css大背景图片处理
资料...
10-16 1242
background:url(../images/bg.jpg) no-repeat fixed center bottom;width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg' ,sizingMethod= 'scale' ); background-repe
CSS背景
林彬的专栏
05-20 170
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写（复合属性） background:背景颜色...
css背景图片层处理
一点点点白的开始
11-08 635
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径
css 背景图片跟div处理
acvc225的博客
07-06 417
设置背景图片适应div大小 背景图片自适应div，两种设置方法： 1、种是设置background-size:cover 2、设置背景图片no-repeat，background-size:100%; 其他设置属性 /*background-position: center;*/ /*background-size:cover;*/ /*-webkit-background-size:cover;*/ /*-o-background-size:cover;*/ 设置div大小适应背景图片..
css颜色跟背景总结（内含实例及截图）
weixin_45135068的博客
07-31 444
目录 css颜色表示 1.1 命名颜色 1.2 RGB颜色表示法 1.3 十六进制颜色制 1.4 rgba 有关背景相关属性 2.1 背景颜色 2.2 背景图 2.3 图像重复background-repeat属性 2.4 背景图像位置background-position属性 2.5 Background-attachment背景附件属性 2.6 背景连写 2.7 多背景 1.css颜色表示 1.1 命名颜色 直接采用某个颜色的英文单词命名 -transparent 透明色 -red，black…
CSS的元素显示模式+CSS背景相关知识+综合案例：五彩导航
月光晒了很凉快的博客
03-17 1032
文章目录1. CSS的元素显示模式1.1 什么是元素的显示模式1.2 块元素1.3 行内元素1.4 行内块元素1.5 元素显示模式总结1.6 元素显示模式转换1.7 案例：简洁版小米侧边栏1.8 单行文字垂直居中的原理2. CSS背景2.1 背景颜色2.2 背景图片2.3 背景平铺2.4 背景图片位置(1)参数是方位名词(2)参数是精确单位(3)参数是混合单位2.5 背景图像固定2.6 背景属性复合写法2.7 背景半透明2.8 背景总结3. 综合案例：五彩导航 1. CSS的元素显示模式 1.1 什么是元
css3的多重背景技术,CSS3实例分享之多重背景的实现(Multiple backgrounds)
weixin_31201481的博客
08-03 846
CSS3的诞生为我们解决了这一问题，在CSS3里，通过background-image或者background可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块元素里。首先我们来看一下语法吧：background ： [background-image] | [background-origin] | [background-clip] | [background-repeat...
前端基础学习入门教程之CSS背景
前端基础入门学习线路
02-15 2693
CSS背景 - background 属性 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。 具体参数值在下面 一 一介绍 CSS背景 - background-attachment 属性 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 background-attac...
CSS大师指南：第二版——最新CSS3技术和实战案例
本书结构严谨，分为多个章节，从基础概念如代码结构、选择器、视觉格式化模型，到具体技术如背景应用、链接样式、列表和导航栏、表单和数据表格、布局等，涵盖了CSS设计的各个方面。此外，还有两章专门探讨如何处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值