CSS中background-image【CSS Sprites,base64编码】

CSS中,background可以设置对象的背景样式。如颜色或者使用一张图片代替,今天我要多说两句的就是使用一张图片的参数:image。准确的来说应该是background-image。我们可以这样用它:

body{
           
background-image: url(... .jpg);

}
       /*
也可以直接使用background 代替 */

body{
          
background: url("....jpg");

}

css显示图片分3种,第一种是单纯的显示一个图片;第二种称之为CSS
Sprites
,也就是说把若干小图片合成一个大图片,然后通过background的postion参数实现效果,第三种是Inline
images
。这个方法不适用于IE浏览器。

CSS
Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里,格式是这样的:data:[<mediatype>][;base64],<data>

data:URL标签是在1995年第一次提出,按RFC2397规范的描述:它是"allows inclusion of small data items as
‘immediate‘ data.(允许在页面中包含一些小的即时数据)"。如一个内嵌的的图片可以这样引用:

{  background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);  }
这段代码可以在firefox浏览器运行。这行代码的意思是,gif格式的以base64编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。

时间: 2024-10-12 14:42:28

CSS中background-image【CSS Sprites,base64编码】的相关文章

css中background背景属性概

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*

Css中常用中文字体的Unicode编码对照

在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便使用. 宋体 SimSun \5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 新宋体 NSimSun \65B0\5B8B\4F53 新细明体

css中background背景属性概述

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)

delphi 10.1 Berlin 中使用自带的 Base64 编码

delphi 10.1 berlin版本中,有好几个 base64 编码的单元可以使用,例如 Indy, MessageDigest_5,还有 CnBase64,我现在使用自带的 System.NetEncoding. var params: string; Digest: TBytes; Base64: TBase64Encoding; begin Base64 := TBase64Encoding.Create; params := Base64.EncodeBytesToString(Di

Css中路径data:image/png;base64的用法详解 (转载)

大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR FWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJRE FUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIB hH5E

Css中路径data:image/png;base64的用法详解

今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR FWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJRE FUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIB hH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ

css中 background设置

css2中有五个与背景相关的属性.它们是: background-color:完全填充背景的颜色 background-image:用作背景的图片 background-position:确定背景图片的位置 background-repeat:确定背景图片是否重复铺平 background-attachment:确定背景图片是否随页面滚动                                                                                

CSS中background:url(图片) 不能显示的问题

刚刚碰到一个奇怪的问题,这样一段CSS代码: 1 .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题,俄,百度了好久终于让我给找到了真正的问题在哪? 在url(imagepath)里的这个imagepath(图片路径).原来它是相对于.css文件所在的文件夹,也就是调用css文件夹下的子文件夹来获取路径地址, 通过浏览器调试,可以看到浏览器获取路径是从css下面的img来找我的图片的,但是 我的im

CSS中background属性详解

CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : tra CSS背景属性 background css 说明 background-imag