多个元素上的CSS渐变 [英] CSS gradient over multiple elements

问题描述

我想知道是否可以将单个CSS3渐变背景应用于多个元素.换句话说，渐变会覆盖父元素，但仅在子元素内部可见.

搜索后，我发现此线程:在多个视图上应用渐变

这正是我的问题，尽管我需要它作为CSS/HTML代码.

为使问题可视化，我拍了两张照片:

这是基本设置.需要渐变背景的两个<div>位于较大的<div>元素内.

如您所见，第二张图像中的渐变从元素A完美过渡到元素B. 在大多数图像编辑程序中都可以轻松实现这种效果，因此我可以使用适当的图像来获得所需的效果.

但是，由于图像可能不是解决此问题的最佳方法，因此我希望在此处找到有关仅使用CSS如何做到这一点的答案.我以前使用过渐变色，但是我自己还没有找到解决此问题的方法.

感谢您的帮助.

编辑(2015年6月1日13:30 GMT + 1): 元素A和B应该能够具有圆角. 最初将跨度渐变假定为radial-gradient，但不必如此. 也许问题确实无法解决.

解决方案

(即使此问题非常古老...)

看看 Multiple.js -描述如何将渐变应用于多个元素没有js .

引自演示页面:

.selector {
  background-image: linear-gradient(white, black);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* <- here it is */
  width: 100px;
  height: 100px;
}

background-attachment: fixed 将背景扩大到视口的大小并在每个元素中显示适当的块，正是所需的块！

这背后的想法很简单，很聪明，并且适用于大多数现代浏览器(IE8也是如此).

如果应用，则外观如下:

I was wondering if it is possible to apply a single CSS3 gradient background to multiple elements. In other words, the gradient spans over the parent element but is only visible inside the child elements.

After searching, I found this thread: Applying gradient over multiple views

This is exactly my problem, though I need it as CSS/HTML code.

To visualize the problem, I made two pictures:

This is the basic setting. The two <div>s needing a gradient background are inside a larger <div> element.

As you can see, the gradient in the second image perfecly fades from element A to element B. This effect is easily doable in most image-editing programs, so I could just use an appropriate image to get the desired effect.

However, since images are probably not the best way to solve this, I hope to find an answer here on how to do this with only CSS. I used gradients before, but I have not found a solution to this problem on my own yet.

Any help is appreciated.

EDIT (06/01/15 13:30 GMT+1): The Elements A and B should be able to have round corners. The spanning gradient was originally supposed to be a radial-gradient, but it does not need to be. Maybe the problem is really not solvable.

解决方案

(Even if this qestion is quite very old...)

Have a look at Multiple.js - which describes how to apply a gradient to multiple elements without js.

Quoted from the demo page:

.selector {
  background-image: linear-gradient(white, black);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* <- here it is */
  width: 100px;
  height: 100px;
}

background-attachment: fixed expands background to viewport's size and displays in every element appropriate chunk, exactly what is needed!

The idea behind this is simple as smart and works for most modern browsers (IE8 too).

If applied it looks like this:

这篇关于多个元素上的CSS渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！