标签: linear-gradients

当我在我的页面上使用它时,不会出现背景渐变(我现在只担心Safari和Firefox):

$("#myElement").css({
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
    backgroundImage: "-moz-linear-gradient(top, black, white)"
});

我尝试在适当的浏览器中使用其中一个,但在那里没有运气.

我可以在我的代码中为元素使用内联样式属性,但如果有一种方法可以使用jQuery的API,我宁愿不这样做.

我决定在我的网站上完全放弃对IE6和IE7的支持,将其用户重定向到纯文本警告页面.但是我仍然支持IE8和IE9.

我使用CSS3 PIE来实现这一点,并且border-radius在两个(IE8/9)中工作,盒子阴影在两者中都有效,但是我也依赖于线性渐变.我有大量标签用于实现此目的:

background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */

behavior: url(/PIE.htc); /* load PIE.htc */ …

我在Mozilla Firefox 16中遇到线性渐变问题.

在屏幕上显示坏事是可见的(坏 - 块底部的灯线).

码:

<a href="#">Button Text</a>

和CSS部分:

a {
    background: -moz-linear-gradient(center top , #88EB52, #3CA82D);
    border: 1px solid #399A29;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 54px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    width: 376px;
}

我在屏幕截图上更改了line-height属性.

任何人都可以描述它是什么线以及如何隐藏它？!

谢谢.对不起我的英语不好.

我使用CSS3样式(小提琴)生成了一个渐变colobar,现在想要该颜色条中特定位置(通过x和y coords)的颜色值.据我所知,没有直接的方法可以做到这一点.

我看到两个选择:

1. 在JavaScript中实现渐变算法并从头开始计算值.是否有一个确切的定义该算法如何适用于多种颜色？每个浏览器中的渐变看起来是否相同？

2. 使用canvas和createLinearGradient方法绘制渐变并直接访问画布以获取颜色值.

还有其他选择吗？

有没有办法使用从屏幕中心/中间开始的线性渐变背景？

这是我目前的css:

body {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 800px;
    background: blue;
    background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
    background: linear-gradient(to left, black, blue, blue, black 800px);
}

渐变bg在800px(我想要的)之后停止,但是它位于屏幕的右侧,而不是在网页的内容之后.我不能把它移到其他任何地方.此外,它出现在与内容不同的距离处,具体取决于窗口大小.我需要将它固定在我的内容后面的中心.

也许像下一行这样的东西存在？

background: linear-gradient(to sides, blue, black 400px);

因此,我需要能够将线性渐变的起始位置设置为中心,并让浏览器将其运行到两侧.从中心400px是它应该停止的地方(之后使用最后一种颜色) - 所以渐变的总宽度应该是800px.

我需要有关android drawable线性渐变的帮助,使用自定义渐变作为工具栏中的阴影,但我不能在渐变的末尾获得白线的装备.

XML布局,最后一个RelativeLayout子元素视图正在丢弃阴影.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
    <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextColor="@android:color/white"
        android:weightSum="1">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabIndicatorColor="@color/tabIndicator"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="12dp"
            app:tabTextAppearance="@style/customTabLayout"
            android:layout_weight="0.90"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </android.support.design.widget.TabLayout>


    </android.support.v7.widget.Toolbar>

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager_main"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/toolbar" />

<View
    android:layout_width="match_parent"
    android:layout_height="14dp"
    android:background="@drawable/drop_shadow"
    android:layout_below="@+id/toolbar"/>
</RelativeLayout>

可绘制渐变

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:type="linear"
    android:angle="270"
    android:endColor="#00000000"
    android:startColor="#5a000000" />
</shape>

我正在尝试使用3色渐变来为Xcode中的文本着色,它似乎无法获得我正在寻找的结果.我已经取得了以下成功,但这只能通过渐变给我两种颜色.

@IBOutlet weak var textSample: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()
    textSample.textColor = UIColor(patternImage: gradientImage(size: textSample.frame.size, color1: CIColor(color: UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)), color2: CIColor(color: UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.2))))
}

func gradientImage(size: CGSize, color1: CIColor, color2: CIColor) -> UIImage {

    let context = CIContext(options: nil)
    let filter = CIFilter(name: "CILinearGradient")
    var startVector: CIVector
    var endVector: CIVector

    filter!.setDefaults()

    startVector = CIVector(x: size.width * 0.5, y: 0)
    endVector = CIVector(x: size.width * 0.5, y: size.height …

如何使用CSS创建以下彩虹效果？

即顶部圆形边框,固体彩虹色停止(不插入HTML).

颜色是:#c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4.

到目前为止我尝试了什么:

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 4px;
  
  background-image: repeating-linear-gradient(to right, #c4e17f 50px, #f7fdca 50px, #fad071 50px, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

我想创建一个闪耀加载动画，它将出现在具有不同背景颜色的多个元素上。

目前，我正在使用background-image渐变并为background-position使用vw单位设置动画，但它不可扩展，我的元素将具有不同的长度。

有没有办法background-image用百分比单位制作动画？

创建的动画

body {
  background: black;
}

header {
  width: 100%;
  height: 50px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: -100vw;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: -100vw;    
  }
  100% {
    background-position: 100vw;   
  }
}

<header></header>

我试图做到这一点，以便当您滚动经过页面的顶部和底部时，我在正文上使用的背景渐变显示在正文的边缘之外。

是否有可能做到这一点？

我尝试过在根元素上设置background-image和background样式属性<html>，但似乎都没有超出正文传统结束位置的边缘。

请注意，这是在<html>标签上，而不是<body>标签上，而且由于过度滚动的工作方式，jsfiddle 似乎无法正确重现该问题。

这是一个复制示例（将其复制到index.html文件中进行测试）。我也用 试过了background-image，效果是一样的。

<html style="background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
</html>

下面是它的 .gif：

这是一个 .gif，其中已在 上设置了静态颜色<html>，并在 上设置了渐变<body>：

就像这样：

<html style="background-color: red">
    <body style="margin: 0; background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
    </body>
</html>

我提供了垂直渐变的示例，以匹配关闭期间请求的示例，但我主要感兴趣的是在页面上方和下方扩展水平渐变。