Tag: 背景图像

Google Chrome扩展程序 – 无法使用CSS加载本地图片: 我有一个简单的Chrome扩展，使用内容脚本function来修改网站。更具体地说，是所述网站的background-image 。出于某种原因，我似乎无法使用本地图像，即使它们被打包在扩展名中。 body { background: #000 url('image.jpg') !important; background-repeat: repeat !important; } 就是这样，最简单的CSS，但它不会工作。浏览器不加载图像。

CSS：背景颜色的背景图像: 我有面板，如果这个面板被选中（点击它），我把它涂成蓝色。另外，我在该面板上添加了一个小符号（ .png图像），表示所选面板已经被选中。因此，如果用户看到例如10个面板，并且其中4个具有这个小标志，他知道他已经在之前点击过这些面板。这项工作很好。现在的问题是，我不能显示小号，同时使面板蓝色。我把面板设置为蓝色的CSS background: #6DB3F2; 和background-image: url('images/checked.png')的背景图片。但似乎背景颜色是在图像上方，所以你看不到标志。因此，是否可以为背景颜色和背景图像设置z-index es？

如何从HTML表格中完全删除边框: 我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一张被4张图片包围的空白页。这是我的代码： <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> 和CSS类是以下内容： .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); } .middle { width: 536px; height: 280px; } .bRight […]

如何旋转容器中的背景图像？: 我想旋转Chrome中滚动条button中放置的图片。现在我有一个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; } 我希望旋转图像而不旋转其内容。

背景图像上的半透明颜色层？: 我有一个DIV，我想把一个模式作为背景。这种模式是灰色的。所以为了使它更好一点，我想把一个透明的颜色“层”。下面是我尝试过，但没有工作。有没有办法把彩色图层放在背景图片上？预先感谢您的回复。干杯。马克。这是我的CSS： background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

IE 8：背景大小的修复: 我试图添加背景大小的IE浏览器，但它不工作： HTML <h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2> CSS： div#content h2#news { background: url('..http://img.dovov.comnews-background.jpg') no-repeat; background-size: 100%; border-radius: 20px; color: #fff; margin: 20px 0 0 20px; padding: 8px 20px; width: 90%; -moz-background-size: 100%; -moz-border-radius: 20px; -webkit-background-size: 100%; -webkit-border-radius: 20px; } filter有什么问题？

适合背景图像到div: 我在后面的div中有一个背景图片，但是图片被切掉了： <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> 有没有办法显示背景图像而不切断它？

我可以使用CSS有多个背景图片吗？: 是否有可能有两个背景图像？例如，我希望在顶部重复一个图像（repeat-x），并在整个页面上重复一个图像（重复），其中整个页面的图像在顶部重复的图像的后面。我发现我可以通过设置html和body的背景来获得两个背景图像的预期效果： html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } 这是“好”的CSS？有更好的方法吗？而如果我想要三个或更多的背景图片呢？

将Base64背景图像数据embedded到CSS中是好还是坏的做法？: 我正在查看一个greasemonkey userscript的来源，并注意到他们的CSS中的以下内容： .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 我可以理解的是，一个greasemonkey脚本可能想要在源代码中捆绑任何东西，而不是将其托pipe在服务器上，这足够明显。但是由于我以前没有见过这种技术，所以我考虑过它的使用，这似乎很有吸引力，原因有很多：它将减less页面加载时的HTTP请求量，从而提高性能如果没有CDN，那么它将减less通过与图像一起发送的cookie产生的通信量 CSS文件可以被caching CSS文件可以被GZIPPED 考虑到IE6（例如）有背景图像caching的问题，这似乎不是最糟糕的想法… 那么，这是一个好的或不好的做法，为什么不使用它，你会用什么工具来base64编码图像？更新 – testing结果 testing与图像： http : //fragged.org/dev/map-shot.jpg – 133.6Kb testingurl： http ： //fragged.org/dev/base64.html 专用CSS文件： http : //fragged.org/dev/base64.css – 178.1Kb GZIP编码服务器端产生的大小发送到客户端（YSLOW组件testing）： 59.3Kb 保存发送给客户端浏览器的数据： 74.3Kb 不错，但是对于较小的图像来说，它会略微有用，我猜。更新：在Google工作的Google工程师Bryan McQuade在ChromeDevSummit 2013上表示：数据：uris在CSS中被认为是在他的演讲中提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant mobile web apps 。请参阅http://developer.chrome.com/devsummit/sessions，并牢记 – 实际的幻灯片