Questions tagged «background-image»

如何为我使用CSS3渐变background-color，然后应用background-image来应用某种透光的纹理？

1250 css  background-image  gradient 

这个问题的答案是社区的努力。编辑现有答案以改善此职位。它目前不接受新的答案或互动。 在什么情况下，与IMGCSS相对，使用HTML 标签显示图像更合适，background-image反之亦然？ 因素可能包括可访问性，浏览器支持，动态内容或任何类型的技术限制或可用性原则。

777 html  css  image  background-image 

我一直在查看油脂猴子用户脚本的来源，并在他们的CSS中注意到以下内容： .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 我可以理解，滑脂脚本希望将其可以捆绑的所有内容捆绑在源代码中，而不是将其托管在服务器上，这很明显。但是由于我以前没有看过这种技术，因此我考虑了它的使用，并且由于许多原因，它似乎很有吸引力： 它将减少页面加载时的HTTP请求数量，从而提高性能 如果没有CDN，则它将减少通过Cookie与图像一起发送而产生的流量 可以缓存CSS文件 CSS文件可以GZIPPED 考虑到IE6（例如）在背景图片缓存方面存在问题，这似乎不是最糟糕的主意... 那么，这是好事还是坏事，为什么您不使用它，以及使用哪种工具对图像进行base64编码？ 更新-测试结果 图片测试：http：//fragged.org/dev/map-shot.jpg-133.6Kb 测试网址：http : //fragged.org/dev/base64.html 专用CSS文件： http： //fragged.org/dev/base64.css-178.1Kb GZIP编码服务器端 发送给客户端的结果大小（YSLOW组件测试）：59.3Kb 发送到客户端浏览器的数据保存：74.3Kb 不错，但是我猜它对较小的图像用处不大。 更新：Google软件工程师Bryan McQuade在PageSpeed上表示，他在ChromeDevSummit 2013上表示，CSS中的data：uris被认为是在演讲期间提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant mobile web apps。请参阅http://developer.chrome.com/devsum​​mit/sessions，并牢记这一点- 实际幻灯片

475 css  base64  background-image  data-uri 

我有一个JPEG文件，正在将其用作搜索页面的背景图像，并且由于要在Backbone.js上下文中进行工作，所以我正在使用CSS进行设置： background-image: url("whatever.jpg"); 我想一个CSS 3模糊滤镜应用只为背景，但只是一个元素，我不知道如何风格。如果我尝试： -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); background-image在CSS的下面，它为整个页面设置了样式，而不仅仅是背景。有没有办法只选择图像并对其应用滤镜？另外，是否有一种方法可以仅关闭页面上所有其他元素的模糊效果？

467 css  background-image  css-filters 

我想显示具有特定宽度和高度的URL的图像，即使它具有不同的大小比例。所以我想调整大小（保持比例），然后将图像切成我想要的大小。 我可以用html img属性调整大小，也可以用剪切background-image。 我该怎么办？ 例： 这个图片： 具有800x600像素大小，我想显示为200x100像素图像 通过img我可以调整图像的大小200x150px： <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> 这给了我这个： <img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"> 运行代码段隐藏结果展开摘要 而且background-image我可以削减图像200x100像素。 <div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> 给我： <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> 运行代码段隐藏结果展开摘要 我该怎么办？ 调整图像大小，然后将其切成我想要的大小？

333 html  css  background-image  image 

我在以下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"> 有没有一种方法可以显示背景图像而不将其剪切掉？

333 html  css  background-image 

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

316 css  background-image 

我有一个DIV，我想放置一个图案作为背景。此图案是灰色的。为了使它更好一点，我想在上面放一个透明的颜色“层”。以下是我尝试过的方法，但是没有用。有没有办法将彩色图层放在背景图像上？ 这是我的CSS： background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

212 css  background-image  background-color 

我有一个网站（g-floors.eu），并且我想使背景（在CSS中，我为内容定义了bg图像）也具有响应性。不幸的是，除了我可以想到的一件事之外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。 基本上，我想实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话 链接：g-floors.eu 我到目前为止的代码（内容部分） #content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; }

195 css  responsive-design  background-image  image-resizing 

如果选择了该面板（单击该面板），则该面板的颜色为蓝色。此外，我.png在该面板上添加了一个小标志（图像），这表明所选面板之前已被选中。 因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变蓝。 我使用css将面板设置为蓝色，使用设置background: #6DB3F2;背景图像background-image: url('images/checked.png')。但是背景色似乎在图像上方，因此您看不到该标志。 因此，可以z-index为背景颜色和背景图像设置es吗？

169 css  background  background-image  background-color 

是否可以background-image为SVG <path>元素设置a ？ 例如，如果我设置了element class="wall"，则CSS样式.wall {fill: red;}有效，但.wall{background-image: url(wall.jpg)}都不起作用.wall {background-color: red;}。

166 html  css  image  svg  background-image 

我想旋转放在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; } 我希望旋转图像而不旋转其内容。

160 css  background-image  image-rotation 

我的目标是制作一个类似于“相框”的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; …

141 html  css  html-table  background-image 

我正在尝试使用CSS过渡创建“淡入淡出”效果。但是我不能让它与背景图像一起使用... CSS： .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background …

121 css  background  background-image  css-transitions 

我想将背景图像设置为不同的div，但是我的问题是： 图片尺寸为固定值（60px）。 改变div的大小 如何拉伸背景图像以填充整个div背景？ #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } 在此处检查代码。

102 css  html  background  background-image