什么是不对的CSS背景语法？ [英] What is wrong with this CSS background syntax?

查看：213 发布时间：2016/8/1 19:10:44 css background circle

本文介绍了什么是不对的CSS背景语法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在此链接： HTTP：//$c$cpen.io / FelixKiunke /笔/ nvDcj] [1] 你可以看到，这个家伙做了一个很好的循环，完成填充其边缘每隔10秒。这就是我想复制的东西。

我抄编译CSS以及从该页面的HTML，并把它在一些本地文件。当我打开我的网页与此有关吧，铬告诉我，背景CSS元素有无效语法等圆不显示在所有。

为什么语法无效在我的复制code，但不是在现场？

 / *\r
    注意有关前叉：\r
    这表明通过HugoGiraudel（HTTP：//$c$cpen.io/HugoGiraudel/pen/BHEwo）使用的馅饼微调径向渐变的。\r
    大部分的code是不变的，也让我的变化清楚，我已删除了previous意见。\r
    我加了径向渐变（见悬停颜色变化），并为响应大小（点击）示范，有点点击我伪元素。\r
    * /\r
    * {\r
      箱尺寸：边界盒;\r
    }\r
    \r
    .wrapper {\r
      宽度：250像素;\r
      高度：250像素;\r
      保证金：10px的汽车;\r
      位置：相对;\r
      背景：白色;\r
      / *在点击更大尺寸：* /\r
      过渡：宽0.5S，0.5S高度;\r
    }\r
    .wrapper.big {\r
      宽度：400像素;\r
      高度：400像素;\r
    }\r
    \r
    .pie {\r
      宽度：50％;\r
      高度：100％;\r
      变换产地：100％50％;\r
      位置：绝对的;\r
      / *\r
      这里谈到的径向渐变。\r
      请注意，它必须有对齐左心为.filler，\r
      和右心为.spinner！\r
      * /\r
    / * CHROME说，下一行是无效* /\r
      背景：径向渐变（左图中心，圆，＃00CCFF 0像素，＃000088 100％）;\r
      / *边框不能是透明的，看起来真难看！ * /\r
      边框：20像素固体＃024;\r
    }\r
    \r
    .spinner {\r
      边界半径：100％0 0 100％/ 50％0 0 50％;\r
      的z-index：200;\r
    / * CHROME说，下一行是无效* /\r
      背景：径向渐变（右中心，圆，＃00CCFF 0像素，＃000088 100％）;\r
      右边框：无;\r
      动画：罗塔10S线性无穷;\r
    }\r
    .spinner :: {后\r
      位置：绝对的;\r
      高度：20像素;\r
      顶：0像素;\r
      右：0像素;\r
      内容：点击我！;\r
      变换：旋转（270deg）;\r
      变换产地：100％100％;\r
      颜色：白色;\r
      字体：16px的/ 20px的无衬线;\r
    }\r
    \r
    .wrapper：悬停.pie {\r
      边框颜色：＃620;\r
    }\r
    .wrapper：悬停.filler {\r
    / * CHROME说，下一行是无效* /\r
      背景：径向梯度（左中心，圆，＃ffbb11 0像素，＃dd6600 100％）;\r
    }\r
    .wrapper：悬停.spinner {\r
      背景：径向渐变（右中心，圆，＃ffbb11 0像素，＃dd6600 100％）;\r
    }\r
    \r
    .filler {\r
      边界半径：0 100％100％0/0 50％50％0;\r
      左：50％;\r
      不透明度：0;\r
      的z-index：100;\r
      动画：补10S步骤（1月底）无限;\r
      左边框：无;\r
    }\r
    \r
    .mask {\r
      宽度：50％;\r
      高度：100％;\r
      位置：绝对的;\r
      背景：继承;\r
      不透明度：1;\r
      的z-index：300;\r
      动画：面膜10S步骤（1月底）无限;\r
    }\r
    \r
    @keyframes罗塔{\r
      0％{\r
        变换：旋转（0deg）;\r
      }\r
      100％{\r
        变换：旋转（360deg）;\r
      }\r
    }\r
    @keyframes面具{\r
      0％{\r
        不透明度：1;\r
      }\r
      50％，100％{\r
        不透明度：0;\r
      }\r
    }\r
    @keyframes填写{\r
      0％{\r
        不透明度：0;\r
      }\r
      50％，100％{\r
        不透明度：1;\r
      }\r
    }

＆LT; DIV CLASS =包装＆GT;\r
      ＆LT; DIV CLASS =馅饼微调＆GT;＆LT; / DIV＆GT;\r
      ＆LT; DIV CLASS =馅饼填料＆GT;＆LT; / DIV＆GT;\r
      ＆LT; DIV CLASS =面具＆GT;＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;

更新
这里是更新的（和工作）CSS：

/ 微调的/
/ *
注意有关前叉：
这表明通过HugoGiraudel使用的馅饼微调径向渐变的（的http：// codePEN .IO / HugoGiraudel /笔/ BHEwo ）。
大部分的code是不变的，也让我的变化清楚，我已删除了previous意见。
我加了径向渐变（见悬停颜色变化），并为响应大小（点击）示范，有点点击我伪元素。
* /

  * {
  箱尺寸：边界盒;
}.wrapper {
  宽度：250像素;
  高度：250像素;
  保证金：10px的汽车;
  位置：相对;
  背景：白色;
  / *在点击更大尺寸：* /
  过渡：宽0.5S，0.5S高度;
}
.wrapper.big {
  宽度：400像素;
  高度：400像素;
}.pie {
  宽度：50％;
  高度：100％;
  变换产地：100％50％;
  位置：绝对的;
  / *
  这里谈到的径向渐变。
  请注意，它必须有对齐左心为.filler，
  和右心为.spinner！
  * /
  背景：-webkit-梯度（圆圈左边中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-webkit-线性渐变（圆圈左边中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-moz-线性渐变（圆圈左边中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-ms线性梯度（圆圈左边中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-o-线性梯度（圆左边中心，＃00CCFF 0像素，＃000088 100％）;
  背景：径向渐变（圆圈左边中心，＃00CCFF 0像素，＃000088 100％）;
  / *边框不能是透明的，看起来真难看！ * /
  边框：20像素固体＃024;
}.spinner {
  边界半径：100％0 0 100％/ 50％0 0 50％;
  的z-index：200;
  背景：-webkit-梯度（圆圈右侧中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-webkit-线性渐变（圆圈右侧中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-moz-线性渐变（圆圈右侧中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-ms线性梯度（圆圈右侧中心，＃00CCFF 0像素，＃000088 100％）;
  背景：-o-线性渐变（圆圈右侧中心，＃00CCFF 0像素，＃000088 100％）;
  背景：径向渐变（圆圈右侧中心，＃00CCFF 0像素，＃000088 100％）;
  右边框：无;
  -webkit-动画：罗塔10S线性无穷;
  -moz-动画：罗塔10S线性无穷;
  -o-动画：罗塔10S线性无穷;
  动画：罗塔10S线性无穷;
}
.spinner :: {后
  位置：绝对的;
  高度：20像素;
  顶：0像素;
  右：0像素;
  内容：点击我！;
  变换：旋转（270deg）;
  变换产地：100％100％;
  颜色：白色;
  字体：16px的/ 20px的无衬线;
}.wrapper：悬停.pie {
  边框颜色：＃620;
}
.wrapper：悬停.filler {
    背景：-webkit-梯度（圆圈左边中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-webkit-线性渐变（圆圈左边中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-moz-线性渐变（圆圈左边中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-ms线性梯度（圆圈左边中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-o-线性梯度（圆左边中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：径向渐变（圆圈左边中心，＃ffbb11 0像素，＃dd6600 100％）;
}
.wrapper：悬停.spinner {
    背景：-webkit-梯度（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-webkit-线性渐变（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-moz-线性渐变（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-ms线性梯度（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：-o-线性渐变（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）;
    背景：径向渐变（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）;
}.filler {
    边界半径：0 100％100％0/0 50％50％0;
    左：50％;
    不透明度：0;
    的z-index：100;
    -webkit-动画：填写10S步骤（1月底）无限;
    -moz-动画：填写10S步骤（1月底）无限;
    -o-动画：填写10S步骤（1月底）无限;
    动画：补10S步骤（1月底）无限;
    左边框：无;
}.mask {
    宽度：50％;
    高度：100％;
    位置：绝对的;
    背景：继承;
    不透明度：1;
    的z-index：300;
    -webkit-动画：面膜10S步骤（1月底）无限;
    -moz-动画：面膜10S步骤（1月底）无限;
    -o-动画：面膜10S步骤（1月底）无限;
    动画：面膜10S步骤（1月底）无限;
}@ -webkit-关键帧罗塔{
  0％{
    变换：旋转（0deg）;
  }
  100％{
    变换：旋转（360deg）;
  }
}@ -moz-关键帧罗塔{
  0％{
    变换：旋转（0deg）;
  }
  100％{
    变换：旋转（360deg）;
  }
}@ -o-关键帧罗塔{
  0％{
    变换：旋转（0deg）;
  }
  100％{
    变换：旋转（360deg）;
  }
}@keyframes罗塔{
  0％{
    变换：旋转（0deg）;
  }
  100％{
    变换：旋转（360deg）;
  }
}
@ -webkit-关键帧面具{
  0％{
    不透明度：1;
  }
  50％，100％{
    不透明度：0;
  }
}@ -moz-关键帧面具{
  0％{
    不透明度：1;
  }
  50％，100％{
    不透明度：0;
  }
}@ -o-关键帧面具{
  0％{
    不透明度：1;
  }
  50％，100％{
    不透明度：0;
  }
}@keyframes面具{
  0％{
    不透明度：1;
  }
  50％，100％{
    不透明度：0;
  }
}@ -webkit-关键帧补{
  0％{
    不透明度：0;
  }
  50％，100％{
    不透明度：1;
  }
}@ -moz-关键帧补{
  0％{
    不透明度：0;
  }
  50％，100％{
    不透明度：1;
  }
}@ -o-关键帧补{
  0％{
    不透明度：0;
  }
  50％，100％{
    不透明度：1;
  }
}@keyframes填写{
  0％{
    不透明度：0;
  }
  50％，100％{
    不透明度：1;
  }
}  [1]：HTTP：//$c$cpen.io/FelixKiunke/pen/nvDcj

解决方案

语法的确是不正确。它应该是径向渐变（圆圈右侧中心，＃ffbb11 0像素，＃dd6600 100％）。这也是在codePEN不正确的，一旦你解决它，动画看起来不一样（它有一个点击这里号召性动作，当你悬停它）。它不是核心问题，虽然。

为什么动画没有在您的版本在所有工作的原因，是因为动画属性需要一个 -webkit - preFIX在Chrome中。

在codePEN， - $ P $免费PFIX-使用，这就是为什么它的工作原理。它是自动添加CSS属性的prefixed版本库。
codePEN也可以使用自动prefixer （另一种这样的库）或者两者都不是。一旦你选择没有，你会看到，codePEN例子也不起作用了，因为（S）CSS不包含的CSS属性所需的prefixed版本。

因此，该解决方案：要么使用一个库过，或者添加为Chrome所需的prefixed属性（也许其他浏览器太）

At this link: [http://codepen.io/FelixKiunke/pen/nvDcj][1] you can see that this guy made a nice circle that finishing filling its edges up every 10 seconds. This is what I want to duplicate.

I have copied the compiled CSS as well as the HTML from this page and put it in some local files. When I open my page with this on it, Chrome tells me that the background CSS elements have invalid syntax and so the circle does not show up at all.

Why is the syntax invalid in my copied code but not on the site?

    /*
    NOTE ABOUT THE FORK:
    This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
    Most of the code is unchanged, too make my changes clear I have removed the previous comments.
    I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
    */
    * {
      box-sizing: border-box;
    }
    
    .wrapper {
      width: 250px;
      height: 250px;
      margin: 10px auto;
      position: relative;
      background: white;
      /*The bigger size at click:*/
      transition: width 0.5s, height 0.5s;
    }
    .wrapper.big {
      width: 400px;
      height: 400px;
    }
    
    .pie {
      width: 50%;
      height: 100%;
      transform-origin: 100% 50%;
      position: absolute;
      /*
      Here comes the radial gradient.
      Note that it has to have the alignment "left center" for the .filler,
      and "right center" for the .spinner!
      */
    /*CHROME SAYS THE NEXT LINE IS INVALID*/
      background: radial-gradient(left center, circle, #00ccff 0px, #000088 100%);
      /* The borders mustn't be transparent, that looks really ugly! */
      border: 20px solid #024;
    }
    
    .spinner {
      border-radius: 100% 0 0 100% / 50% 0 0 50%;
      z-index: 200;
    /*CHROME SAYS THE NEXT LINE IS INVALID*/
      background: radial-gradient(right center, circle, #00ccff 0px, #000088 100%);
      border-right: none;
      animation: rota 10s linear infinite;
    }
    .spinner::after {
      position: absolute;
      height: 20px;
      top: 0px;
      right: 0px;
      content: "Click me!";
      transform: rotate(270deg);
      transform-origin: 100% 100%;
      color: white;
      font: 16px/20px sans-serif;
    }
    
    .wrapper:hover .pie {
      border-color: #620;
    }
    .wrapper:hover .filler {
    /*CHROME SAYS THE NEXT LINE IS INVALID*/
      background: radial-gradient(left center, circle, #ffbb11 0px, #dd6600 100%);
    }
    .wrapper:hover .spinner {
      background: radial-gradient(right center, circle, #ffbb11 0px, #dd6600 100%);
    }
    
    .filler {
      border-radius: 0 100% 100% 0 / 0 50% 50% 0;
      left: 50%;
      opacity: 0;
      z-index: 100;
      animation: fill 10s steps(1, end) infinite;
      border-left: none;
    }
    
    .mask {
      width: 50%;
      height: 100%;
      position: absolute;
      background: inherit;
      opacity: 1;
      z-index: 300;
      animation: mask 10s steps(1, end) infinite;
    }
    
    @keyframes rota {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes mask {
      0% {
        opacity: 1;
      }
      50%, 100% {
        opacity: 0;
      }
    }
    @keyframes fill {
      0% {
        opacity: 0;
      }
      50%, 100% {
        opacity: 1;
      }
    }

    <div class="wrapper">
      <div class="pie spinner"></div>
      <div class="pie filler"></div>
      <div class="mask"></div>
    </div>

Update Here is the updated (and working) CSS:

/Spinner/ /* NOTE ABOUT THE FORK: This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo). Most of the code is unchanged, too make my changes clear I have removed the previous comments. I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element. */

* {
  box-sizing: border-box;
}

.wrapper {
  width: 250px;
  height: 250px;
  margin: 10px auto;
  position: relative;
  background: white;
  /*The bigger size at click:*/
  transition: width 0.5s, height 0.5s;
}
.wrapper.big {
  width: 400px;
  height: 400px;
}

.pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  /*
  Here comes the radial gradient.
  Note that it has to have the alignment "left center" for the .filler,
  and "right center" for the .spinner!
  */
  background: -webkit-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -webkit-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -moz-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -ms-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -o-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: radial-gradient(circle at left center, #00ccff 0px, #000088 100%);
  /* The borders mustn't be transparent, that looks really ugly! */
  border: 20px solid #024;
}

.spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 200;
  background: -webkit-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -webkit-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -moz-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -ms-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -o-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: radial-gradient(circle at right center, #00ccff 0px, #000088 100%);
  border-right: none;
  -webkit-animation: rota 10s linear infinite;
  -moz-animation: rota 10s linear infinite;
  -o-animation: rota 10s linear infinite;
  animation: rota 10s linear infinite;
}
.spinner::after {
  position: absolute;
  height: 20px;
  top: 0px;
  right: 0px;
  content: "Click me!";
  transform: rotate(270deg);
  transform-origin: 100% 100%;
  color: white;
  font: 16px/20px sans-serif;
}

.wrapper:hover .pie {
  border-color: #620;
}
.wrapper:hover .filler {
    background: -webkit-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -webkit-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -moz-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -ms-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -o-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: radial-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
    background: -webkit-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -webkit-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -moz-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -ms-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -o-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
}

.filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    opacity: 0;
    z-index: 100;
    -webkit-animation: fill 10s steps(1, end) infinite;
    -moz-animation: fill 10s steps(1, end) infinite;
    -o-animation: fill 10s steps(1, end) infinite;
    animation: fill 10s steps(1, end) infinite;
    border-left: none;
}

.mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    -webkit-animation: mask 10s steps(1, end) infinite;
    -moz-animation: mask 10s steps(1, end) infinite;
    -o-animation: mask 10s steps(1, end) infinite;
    animation: mask 10s steps(1, end) infinite;
}

@-webkit-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




@-webkit-keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@-moz-keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@-o-keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}



@-webkit-keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

@-moz-keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

@-o-keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

@keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

  [1]: http://codepen.io/FelixKiunke/pen/nvDcj

解决方案

The syntax indeed is incorrect. It should be radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%). This is also incorrect in the CodePen, and once you fix it, the animation looks different (it has a 'Click here' call-to-action when you hover it). It is not the core issue, though.

The reason why the animation doesn't work at all in your version, is because the animation properties need a -webkit- prefix in Chrome.

In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties. CodePen can also use Autoprefixer (another such library) or neither. Once you select 'neither', you'll see that the CodePen example also doesn't work anymore, because the (S)CSS doesn't contain the required prefixed version for the CSS attributes.

So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).

这篇关于什么是不对的CSS背景语法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

什么是不对的CSS背景语法？ [英] What is wrong with this CSS background syntax?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

什么是不对的CSS背景语法？ [英] What is wrong with this CSS background syntax?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭