是否可以使用CSS3和Compass创建此背景效果？ [英] Is it possible to create this background effect using CSS3 and Compass?

问题描述

我正在努力将设计师提供的补偿应用到网站上。

I'm working to apply a comp provided by our designer to a website.

我需要为背景创建的效果如下：

The effect I need to create for the background is the folowing:

它的中心有一个放射状，并且从顶部到底部有一个渐变

It has a radial in the centre AND a gradient from top to bottom

是否可以使用CSS3和Compass在一个元素上创建此效果还是我必须使用两层构建它？

Is it possible to create this effect on one element using CSS3 and Compass or would I have to build it using two layers?

您能推荐一种更好的方法来创建相同效果吗？

Can you recommend a better way of creating the same effect?

谢谢！

推荐答案

如果纯CSS可以实现，Sass / Compass可以实现。实际上，它看起来与使用纯CSS编写的外观没有太大不同：

If it is possible with pure CSS, it is possible with Sass/Compass. In fact, it wouldn't look a whole lot different than how you would write it with pure CSS:

.foo {
  @include background(radial-gradient(blue, transparent 10em), linear-gradient(black, white));
}

您需要调整径向渐变以匹配图像当然，但是可以做到。

You'll need to adjust the radial-gradient to match your image, of course, but it can be done.

这篇关于是否可以使用CSS3和Compass创建此背景效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！