天道酬勤,学无止境

Optimum size of CSS tiled background-images

It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8.

But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering?

评论

I'd imagine it matters very little in these modern browsers you listed in your comment:

IE 8/9, and latest versions of Firefox/Safari/Chome/Opera

However, I have heard of a bug in IE8 when it comes to an image of exactly the size 1px * 1px:

Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
and the demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

So, 8x8 seems like a good enough size to use. I'd be surprised if anyone on the Internets has cared enough about this to rigorously benchmark it.


I did find this, which discusses the subject:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

Make sure to also read the comments.

To sum it up, I'm going to quote myself from months ago:

I'd imagine it matters very little in [the] modern browsers [IE 8/9, and latest versions of Firefox/Safari/Chome/Opera] you listed in your comment.

In some email clients the image won't repeat unless the background image is at least 25X25 so I've settled on that as my default size.

I don't think there is an "optimum size," but the general opinion is that larger dimensions are better than small: see this question, and this one too.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 苦练 CSS 基本功——图解辅助线的原理和画法
    在用 CSS 进行绘图和布局时,除了借助浏览器开发工具之外,还经常需要绘制一些辅助线,以便定位参考。今天就以第 170 号作品中使用的网格线为例,详细讲解一下辅助线的原理和画法。为了使辅助线明显可见,把线的颜色设置为和背景对比强烈的白色,并且线也粗一些,在实际使用时,你应该降低辅助线与背景的对比并且使用细线。分步图解1、定义容器div { font-size: 50px; width: 6em; height: 4em; background-color: teal; }假设你有一个 <div> 容器,容器里是否有元素都可以,当前演示为了突显辅助线,暂时让容器里空空如也:2、一条基本的横线div { background-image: linear-gradient(to bottom, transparent 95%, white 95%); }网格线是一条一条线条组成的,所以要先画出一条线,它的95%都是透明的,只有5%是白色的:3、一条有尺寸的横线div { background-size: 1em 1em; background-repeat: no-repeat; }请把绘制网格线想象成是铺地砖,首先要定义地砖的尺寸,这里用 1em 1em 定义了一块方砖,同时让砖块不重复,所以只显示出了孤单的一块砖:4、横向平铺地砖div { background-repeat
  • css-背景图片和精灵图
    1背景颜色:background-color:red; 取值: 颜色的英文单词(red) rgb(255,0,0) rgba(255,0,0,1) 十六进制(#FF0000) 2.背景图片 background-image: url(02.png); background-image: url(http://pic.topmeizi.com/wp-content/uploads/2017a/04/04/01.jpg); 注意点: 1.图片的地址必须放在url()中,图片地址可以是本地地址,也可以是网络 地址 2.如果图片的大小没有标签的大小大,那么就会自动在水平和垂直方向平铺和填充 3.如果网页上出现了图片,那么浏览器会再次发送请求获取图片 3.背景平铺 background-repeat: repeat; 取值: background-repeat: repeat;默认,在水平和垂直平铺 background-repeat: no-repeat;不平铺 background-repeat: repeat-x;在水平方向平铺 background-repeat: repeat-y;在垂直方向平铺 4.背景定位 background-position: 水平 垂直; 取值: 1.具体方位名词 水平:left center right 垂直:left center right 2
  • CSS 背景图片大小转换(CSS Background image size transition)
    问题 我正在处理一个简单的标记,可以调整 div 的背景 img 的大小。 见小提琴: http://jsfiddle.net/zeYZL/ 我需要使用简单的 CSS 过渡来制作动画。 我尝试这样做: #tile:hover { background-size:550px 550px; background-position:-50px -50px; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; -moz-transition:all 0.5s ease; } 但随后背景图像在悬停时剪辑。 (见 http://jsfiddle.net/5Hm9u/) 有关如何修复它的任何提示? 问候,克里斯 回答1 JSFiddle 您还需要将background属性放在hover之外,以便它知道在未悬停时返回到什么。 例如 .tile{ float:left; margin:1px; width:450px; height:450px; overflow:hidden; background-size:450px 450px; background-position:0px 0px; } 如果你想让它在鼠标悬停时过渡,当你把鼠标移开时,你把过渡放在.tile而不是
  • 10-CSS背景及应用
    CSS背景 背景样式含义值背景颜色background-color三种形式:预定义颜色、十六进制颜色、rgb()颜色背景图片background-image一定要带url();背景图片位置background-position分别写x坐标 y坐标背景图片平铺background-repeatrepeat(默认)、no-repeat、repeat-x、repeat-y背景附着background-attachmentscroll(滚动)、fixed(j静止)背景简写background:背景颜色、背景图片位置、背景平铺、背景滚动、背景位置背景半透明background:rgba() 1、背景颜色 background-color 1)样式:background-color:颜色值; 2)如果不写颜色值默认是透明色transparent; 2、背景图片 background-image 1)样式: [1]background-image:url(路径地址);---地址不加引号 [2]background-image:none;—没有图片; 2)注意: [1]图片放在盒子的底部,如果写内容可以覆盖图片; [2]默认图片为平铺的,如果一张图片的大小和盒子大小不一致,会生成两张、三张、、、、 3、图像平铺 background-repeat 1)样式 [1]background-repeat
  • Rails:如何在CSS中的Rails中设置背景图片?(Rails: How to set a background image in rails from css?)
    问题 我正在使用Rails 3.2,并且我必须为其中一个页面设置背景,并且我尝试了许多方法,但没有任何进展,因此寻求一些良好的帮助。 我试过了 background: url(<%= asset_path 'background.jpg' %>) background: url("public/background.jpg"); background-image:url('/assets/images/background.jpg') 没有任何效果。 请帮我。 回答1 在您的CSS中: background-image: url(background.jpg); 或者 background-image: url(/assets/background.jpg); 在environments/production.rb : # Disable Rails's static asset server (Apache or nginx will already do this) config.serve_static_assets = false # Compress JavaScripts and CSS config.assets.compress = true # Don't fallback to assets pipeline if a precompiled asset is
  • CSS从入门到精通——背景样式
    第1关:背景颜色 任务描述 本关任务:在本关中,我们将学习如何使用CSS去更改HTML元素的背景属性。 本关任务完成之后的效果图如下: 背景色 我们可以使用background-color为元素设置背景色,通常属性值为颜色名称或颜色编码。 因为HTML文档中body元素包含了HTML文档的所有内容,所以如果要改变整个页面的背景颜色,只需要设置body元素的background-color属性。 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> body { background-color: lightyellow; } h1 { color: gray; background-color: palegreen; } p { background-color: lightgray; } </style> </head> <body> <div> <h1>CSS让网页样式更丰富</h1> <p>这是一个段落</p> </div> </body> </html> 显示效果如图: 编程要求 学会了基本设置背景颜色的方式,现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件,完成如下要求:
  • Css第三部分
    Css的三部分 一、盒子模型 1.基本属性 1.1边框属性 border 1.2内边距属性 padding 1.3外边距属性 margin 2.背景图像 2.1 background-color (设置背景颜色) div{ background-color:#ffffff; } 2.2 background-image (设置背景图像) div{ background-image:url(图片路径); } 2.3 background-repeat(设置背景图像平铺方式) div{ background-repeat:属性值; } 属性值如下: 属性值描述repeat沿水平和竖直两个方向平铺(默认值)。no-repeat不平铺。repeat-x只沿水平方向平铺。repeat-y只沿竖直方向平铺。 2.4 background-position(设置背景图像位置) div{ background-position:属性值1 属性值2; } 三个取属性方式: 1、用数值坐标,单位px(20px 20px表示左上角,以原点为起点,往右为正,往左为负,往上为负,往下为 正。) 2、用方位名词,(top bottom left right center书写无顺序,写两个。如果只写一个,另一个默认为center。) 3、用百分比。 2.5 background-attachment
  • CSS 5 方形背景图案(CSS 5-square background pattern)
    问题 我正在寻找一种简洁的 CSS 解决方案来为元素的背景创建特定的模式。 该图案是本页顶部带有红点的小图案: 这是上面放大的图像,因此更容易看到图案: 我只关心红点图案,不关心边框。 我尝试了许多类似以下的变体,但似乎无法破解它: div { background-image: linear-gradient(-45deg, red 25%, transparent 25%), linear-gradient(45deg, red 25%, transparent 25%), linear-gradient(45deg, transparent 75%, red 75%), linear-gradient(-45deg, transparent 75%, red 75%); background-size: 2px 2px; background-position: 40.5% 0, 40.5% 52%, 0 0, 0.05% 52%; } 回答1 我已经设法使用 CSS 伪元素:before和:after来模拟模式,以“覆盖”重复的“棋盘”红色和白色背景的部分。 不幸的是,这需要您对红色的“间隙”使用transparent以外的颜色,以便后面的瓷砖可以“覆盖”红色棋盘部分。 以下 JsFiddle 使用transform:scale(10)更好地显示模式
  • 自学前端第十一天 :CSS盒子背景
    复习关于盒子模型相关知识点补充说明(细节决定成败) 高度样式设置auto 图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算 同行宽度问题 一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度 无法完整放入的元素会被挤下一行展示 比如:一张图片 + 一段文字一起变为块元素,如果一段文字不设置宽度则默认继承父级body100%整行,就不可能和图片一起显示在一行中.(因此只能给p设置固定的宽度,除了图片外父级还剩多少宽度,那么文字就可以设置为剩余宽度,才能在同一行中) 内外边距问题 外边距垂直方向会合并 选最大值 , 水平方向会进行叠加外边距如果父容器没有边界(硬性边界,边框,内边距) 就会产生穿透效果 子元素的外边距会穿透父元素生效内外边距都只能设置为整数 不要设置带小数的 边距 长宽 行高与高度 当行高与高度相等的时候 文本垂直居中 第九天: CSS盒子 背景(background) 总括:CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写
  • 使用CSS将背景图片居中(Centering a background image, using CSS)
    问题 我想将背景图像居中。 没有使用div,这是CSS样式: body{ background-position:center; background-image:url(../images/images2.jpg) no-repeat; } 上面的CSS会全部平铺并将其居中,但是看不到一半的图像,只是向上移动了一点。 我想做的就是将图像居中。 我可以在21英寸的屏幕上观看图像吗? 回答1 background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; 那应该工作。 如果不是,为什么不对图像进行div处理并使用z-index使其成为背景呢? 这将比背景图像更容易居中。 除此之外,请尝试: background-position: 0 100px;/*use a pixel value that will center it*/或者,如果您将身体的min-height为100%,则可以使用50%。 body{ background-repeat:no-repeat; background-position: center center; background-image:url(../images/images2.jpg)
  • css 实现背景图片平铺效果
    目的:为了更好的美化背景图片效果与页面内容 直接上代码: div{ background-image: url(" images/bg.gif "); background-repeat: no-repeat; //不重复 background-repeat: repeat-x; background-size: 100% 100%; // 满屏 } div{backgroud-image:url(images/bg.gif);} <!-- 默认repeat --> 其他平铺方式: repeat:即默认方式,完全平铺背景; no-repeat:在X及Y轴方向均不平铺; repeat-x:横向平铺背景; repeat-y:纵向平铺背景。 传统:有用渐变式背景等其他样式美化页面背景 效果图比较: 图片来源 repeat:即默认方式,完全平铺背景; no-repeat:在X及Y轴方向均不平铺; repeat-x:横向平铺背景; repeat-y:纵向平铺背景。 来源:https://blog.csdn.net/weixin_45627194/article/details/112181960
  • 重复网站背景图片 - 大小与速度(Repeating website background image - size vs speed)
    问题 我想知道是否有人对背景图像进行过任何测试。 我们通常会创建一个至少在一个方向(x 或 y 或两者)重复的背景。 例子假设我们有一个在 X 方向重复的渐变背景。 渐变高度为 400px。 我们有几种可能性。 我们可以创建尽可能小的图像(1 像素宽和 400 像素高),或者我们可以创建具有 400 像素高的较大图像。 观察由于渐变是 400 像素高,我们可能不会选择 GIF 格式,因为它只能存储 256 种自适应颜色。 如果我们的渐变很微妙,也许这已经足够了,因为它没有那么多,否则我们可能宁愿将图像存储为 24 位 PNG 图像以保留完整的渐变细节。 困境我们应该创建一个 1×400 px 大小的图像,该图像将水平重复n次,还是我们应该创建一个 100×400 px 大小的图像以加快浏览器中的渲染速度并具有更大的图像文件大小。 所以。 图像大小与渲染速度? 哪一个赢? 有人愿意测试这个吗? 关于浏览器渲染速度和可能的小图像重绘闪烁... 回答1 渲染速度是这里的瓶颈,因为更大的切片可以放入浏览器的缓存中。 我实际上已经在主要浏览器上尝试过这个,至少其中一些在非常小的图块上呈现明显缓慢。 因此,如果增加位图大小不会大得离谱的文件大小的结果,我肯定会与该走了。 自己测试一下看看。 (记住包括 IE6,因为仍然有很多人坚持使用它)。 您可能能够在位图大小和文件大小之间取得良好的平衡
  • 如何旋转容器中的背景图像?(How to rotate the background image in the container?)
    问题 我想旋转放在Chrome浏览器滚动条按钮中的图像。 现在,我有了一个具有以下内容的CSS: ::-webkit-scrollbar-button:vertical:decrement { background-image:url(images/arrowup.png) ; -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); background-repeat:no-repeat; background-position:center; background-color:#ECEEEF; border-color:#999; } 我希望旋转图像而不旋转其内容。 回答1 做得很好,并在这里回答-http://www.sitepoint.com/css3-transform-b​​ackground-image/ #myelement:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(30deg); -moz
  • CSS知识点总结(一)
    以下内容来自黑马pink老师 1.CSS简介1.1CSS与HTML区别1.2语法规范1.3CSS代码风格 2.CSS基础选择器2.1标签选择器2.2 类选择器2.3 id选择器2.4 通配符选择器 3. CSS字体属性3.1 字体系列3.2 字体大小3.3 字体粗细3.4 文字样式3.5 字体复合属性 4. CSS 文本属性4.1 文本颜色4.2 对齐文本4.3 装饰文本4.4 文本缩进4.5 行间距 5. CSS 引入方式5.1 CSS 的三种样式表5.2 内部样式表5.3 行内样式表5.4 外部样式表 6. CSS 的复合选择器6.1 什么是复合选择器6.2 后代选择器 (重要)6..3 子选择器 (重要)6.4 并集选择器 (重要)6.5 伪类选择器 6.6 :focus 伪类选择器7.CSS 的元素显示模式7.1块元素7.2行内元素7.3行内块元素 8. CSS的背景8.1 背景颜色8.2 背景图片8.3 背景平铺8.4 背景图片位置8.5 背景图像固定(背景附着)8.6 背景复合写法8.7 背景色半透明 1.CSS简介 1.1CSS与HTML区别 HTML 主要做结构,显示元素内容.CSS 美化 HTML ,布局网页.CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离。 1.2语法规范 CSS
  • border&background
    border&background border-radius (圆角边框)box-shadow (盒子阴影)border-image background1. background-image:url();渐变颜色就类似于生成了一张图片,故不能放在background-color或者border-color内使用,背景图片可以放多张 :background-image:url(),url(); 2. background-size: , ;3. background-repeat:no-repeat;4. background-position: 0 0 ,50px 100px;5. background—origin; -----设置图片的起始位置(paddding-box 默认值)6. bcakground-clip;--------设置图片的结束位置(截断 而不是缩小) {border-box 默认值} *-webkit-background-clip:text-------图片反切假如div内有文字,设置这个属性,可以只让文字部分显示图片,其他的部分不显示图片且必须配合以下属性一起写 7. background-attachment;------改变定位属性一般来说,我们为一个容器设置背景图片,宽高都不足以遮住全部背景,里面放入大量文字,超出部分滚动隐藏 我们滑动文字
  • web前端基础(二)
    CSS(二) 文章目录 web前端基础(二)一、前言二、具体内容.CSS web前端基础(二) 本文仅是学习过程中的简略笔记,如有错误,烦请指正。 提示:以下是本篇文章正文内容,下面案例可供参考 一、前言 css设置网页元素的外观样式,行为 二、具体内容 .CSS Css背景 1.背景颜色background-color:颜色; 颜色名,#xxx十六进制,rgb(x,x,x)代码 (默认transparent透明) 2.背景图片 background-image:none|url(图片地址); none表示无图片,有图片必须加url,图片地址不加引号“” 3.图片背景平铺 Background-repeat:repeat; (no-repeat不平铺,repeat-x水平平铺,repeat-y纵向平铺。) 4.背景位置 Background-postion:length || length Background-position:position || position length指百分数,position指方位名词(top,center,bottom,left,right) 必须指定background-image属性,position后面是x坐标或y坐标,可用方位名词或精确单位,如果只指定了一个方位名词,另一个默认居中,指定两个方位名词,则两者顺序无关,效果一致。
  • 【JQuery学习笔记day16】CSS 背景属性
    背景属性Property描述background-color设置元素的背景颜色。background-image把图像设置为背景。background-size设置背景图像的大小。background-origin设置背景图像的定位区域。background-clip设置背景图像的的绘画区域。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background简写属性,作用是将背景属性设置在一个声明中。背景颜色background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: CSS中,颜色值通常以以下方式定义:十六进制 - 如:"#ff0000"RGB - 如:“rgb(255,0,0)”颜色名称 - 如:“red”以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:属性值值说明color指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。transparent指定背景颜色应该是透明的。这是默认inherit指定背景颜色,应该从父元素继承背景图像background-image 属性设置一个元素的背景图像。 元素的背景是元素的总大小,包括填充和边界(但不包括边距)
  • 【夯实基础--CSS】=> 背景(background)
    CSS背景(background) 「1. 背景颜色」 background-color: 颜色值; 默认的值是 transparent 透明的 「2. 背景图片(image)」 语法: background-image : none | url (url) ; 例如: background-image: url(images/1.png); 「3. 背景平铺(repeat)」 background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数作用repeat背景图像在纵向和横向上平铺(默认的)no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺 「4. 背景位置(position)」 background-position : length || length background-position : position || position 参数值length百分数 | 由浮点数字和单位标识符组成的长度值positiontop | center | bottom | left | center | right 方位名词 注意: 必须先指定background-image属性position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。如果指定两个值
  • 如何仅使用CSS制作网格(如方格纸网格)?(How to make a grid (like graph paper grid) with just css?)
    问题 如何仅使用CSS制作网格(如方格纸网格)? 我只想仅使用CSS来制作虚拟网格纸。 先谢谢您的帮助。 回答1 由于您提到了横格纸: div { background-color: #fff; background-size: 100% 1.2em; background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em); background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em); background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em
  • css所有知识点全面复习
    文章目录 什么是 CSS?id 和 class 选择器id 选择器class 选择器 如何插入样式表外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)多重样式多重样式优先级深入概念 CSS 背景背景颜色背景图像背景图像 - 水平或垂直平铺背景图像- 设置定位与不平铺 CSS 文本格式文本颜色文本的对齐方式文本修饰文本转换 文本缩进CSS 字体CSS字型字体样式字体大小用em来设置字体大小 CSS 链接CSS列表属性:列表作为列表项标记的图像 CSS 表格表格边框表格宽度和高度表格文字对齐表格填充 CSS 盒子模型(Box Model)元素的宽度和高度 CSS 边框属性边框样式边框宽度边框-单独设置各边 CSS 轮廓(outline)CSS margin(外边距)CSS padding(填充)CSS 分组 和 嵌套 选择器分组选择器嵌套选择器 CSS 尺寸 (Dimension)CSS Display(显示) 与 Visibility(可见性)CSS Position(定位)static 定位fixed 定位relative 定位absolute 定位sticky 定位 CSS 布局 - OverflowCSS Float(浮动)CSS 布局 - 水平 &