标签: background-image

我如何使用CSS3渐变为我background-color,然后应用一个background-image应用某种光透明纹理？

在什么情况下使用HTML IMG标签来显示图像更合适,而不是CSS background-image,反之亦然？

因素可能包括可访问性,浏览器支持,动态内容或任何类型的技术限制或可用性原则.

我正在查看一个greasemonkey用户脚本的来源,并在他们的css中注意到以下内容:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

我可以理解,一个greasemonkey脚本想要在源代码中捆绑任何东西而不是在服务器上托管它,这是显而易见的.但由于我以前没有看过这种技术,我考虑过它的使用,看起来很有吸引力有很多原因:

1. 它将减少页面加载时的HTTP请求量,从而提高性能
2. 如果没有CDN,那么它将减少通过cookie与图像一起发送产生的流量
3. CSS文件可以缓存
4. 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

不错,但我认为它对于较小的图像会稍微有用.

更新:谷歌的软件工程师Bryan McQuade正在研究PageSpeed,他在ChromeDevSummit 2013上表达了数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的演讲中提供关键/最小的CSS #perfmatters: Instant mobile web apps.请参阅http://developer.chrome.com/devsum​​mit/sessions并记住这一点 - 实际幻灯片

我有一个JPEG文件,我正在使用它作为搜索页面的背景图像,我正在使用CSS来设置它,因为我在Backbone.js上下文中工作:

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 下面,它调整整个页面的样式,而不仅仅是背景.有没有办法只选择图像并应用过滤器？或者,有没有办法只为页面上的每个其他元素关闭模糊？

我想显示具有一定宽度和高度的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;">&nbsp;</div>

给我:

<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

我怎么能两个都做？
调整图像大小,然后将其剪切为我想要的大小？

是否可以有两个背景图像？例如,我希望在顶部重复一个图像(repeat-x),并在整个页面上重复另一个图像(重复),整个页面上的一个重复在顶部重复.

我发现通过设置html和body的背景,我可以达到两个背景图像的效果:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

这是"好"的CSS吗？有更好的方法吗？如果我想要三个或更多背景图像怎么办？

我在下面的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">

有没有办法显示背景图像而不切断它？

我有一个DIV,我想把一个模式作为背景.这种模式是灰色的.所以为了让它更好一点,我想把一个透明的浅色"层"放在上面.以下是我尝试但不起作用的内容.有没有办法将彩色图层放在背景图像上？

这是我的CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

我有一个网站(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;
}

是否可以background-image为SVG <path>元素设置？

例如,如果我设置元素class="wall",CSS样式.wall {fill: red;}可以工作,但.wall{background-image: url(wall.jpg)}不会.wall {background-color: red;}.