我有一个大图像用作页面的背景图像.我想要的是图像的高度将被拉伸以填充页面的高度.它也应该集中.

background: black url("/image/background.jpg") no-repeat fixed center;

background-size：封面将在现代浏览器中发挥作用 – 有关更多详细信息,请参阅mozilla的 documentation.

对于较旧的浏览器(尤其是旧版本的IE),我在使用this one之类的jQuery插件方面取得了很大成功,可以模拟这种行为.

我有一个背景图像的div。我想覆盖背景图像与rgba颜色(rgba(0,0.1))当用户悬停的div。

我想知道是否有一个一维的解决方案(即不是与多个div，一个为图像和一个为颜色等)。

我尝试了多种东西：

<divid="test-1"></div>
<divid="test-2"></div>
<divid="test-3"></div>

和这个CSS：

.the-div {
    background-image: url('the-image');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0.1);
}

#test-2:hover {
    background: url('the-image'),rgba(0,0.1);
}

#test-3:hover {
    background: rgba(0,0.1);
}

见this fiddle。

我看到的唯一选择是使用覆盖，使用JavaScript预加载另一个图像，然后使用.the-div：hover {background：url(‘the-new-image’); }。但是，我想要一个纯CSS解决方案(更整洁;更少的HTTP请求;更少的硬盘)。有没有？

PeterVR的解决方案的缺点是，额外的颜色显示在整个HTML块的顶部 – 这意味着它也显示在div内容的顶部，而不仅仅是背景图像的顶部。这很好，如果你的div是空的，但如果它不使用线性渐变可能是一个更好的解决方案：

<div>Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom,0.1),0.1)),url("the-image.png");
    background-image: -moz-linear-gradient(top,url("the-image.png");
    background-image: -o-linear-gradient(top,url("the-image.png");
    background-image: -ms-linear-gradient(top,url("the-image.png");
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,to(rgba(0,0.1))),url("the-image.png");
    background-image: -webkit-linear-gradient(top,url("the-image.png");
  }
</style>

见fiddle.太糟糕了，梯度规格目前是一团糟。看到compatibility table，上面的代码应该在任何具有显着市场份额的浏览器中工作 – 除了MSIE 9.0及更早版本。

我想弄清楚如何垂直拉伸背景图像.我以下列方式使用3张图片的 CSS3：

background-image: url("left.png"),url("right.png"),url("center.png")
background-repeat: no-repeat,no-repeat,repeat-x
background-position: top left,top right,top

现在我想垂直拉伸这些图像,它们一直延伸到底部.有没有办法做到这一点？

我晚点参加派对,但这对我有用：

background-size: auto 100%;

这将垂直适合图像,让宽度做任何它需要做的事情(我认为它默认重复).您还可以设置：

background-repeat: no-repeat;

因为它不会在水平方向重复图像.

假设我想在CSS中渲染一个箭头,它应该有一个头,尾和灵活的宽度,因此它可以包含文本.我当然可以创建多个div来获得我想要的东西,但是如何才能在 CSS3中完成？

我可以使用多个背景图片：

div.arrow{
    background: url('arrowtail.png') left no-repeat,url('arrowhead.png') right no-repeat;
}

html：

<div>This text is on a transparent background</div>

这给了我一个带箭头和尾巴的div,以及一个透明的中间部分.
中间部分的颜色似乎不可能.

只有一个背景图像,您可以这样做：

div.arrow{ background: red url('some_image.png') no-repeat; }

我知道这是可行的很多方法,但背景颜色的属性真的从速记定义？

不,速记声明并不完全失去.您仍然可以指定背景颜色,但仅适用于最后(中间)图层(无论是否在其中放置图像)：

div.arrow {
    background: url('arrowtail.png') left no-repeat,url('arrowhead.png') right no-repeat,red;
}

请注意,对于您的场景,您的图像可能必须具有完全不透明的背景.背景颜色将显示在图像的任何透明像素下.

jsFiddle demo

然而,单独声明背景颜色可能会比您的场景好多了,因为它可以让您根据相同的背景图像使用不同的颜色(如果您的图像部分上的透明像素可以填充CSS背景)颜色)：

div.arrow {
    background: url('arrowtail.png') left no-repeat,url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

jsFiddle demo