search

Home  >  Q&A  >  body text

前端 - CSS3问题：请问-webkit-background-clip属性，需要写在background属性后面吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-clip:text</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
p{width: 300px; height: 60px; 
    border: 1px solid #000;
    margin: 50px auto;
    font-size: 50px; font-weight: bold;
    text-align: center; line-height: 60px;
    /* -webkit-background-clip: text; 写在background上面则clip不生效*/
    background: -webkit-linear-gradient(red,blue);
    -webkit-background-clip: text; /*写在background属性下面，正常*/
    color: rgba(0,0,0,0);
}
</style>
</head>
<body>
    <p>你好啊！</p>    
</body>
</html>

请问一下，为什么 -webkit-background-clip:text;，需要写在background属性的后面，clip才能生效？谢谢！

PHPzPHPz2778 days ago952

reply all(2)I'll reply

  • PHPz

    PHPz2017-04-17 11:28:12

    CSS abbreviation attribute:

    No value specified will be set to its initial value. This may sound reasonable, but it does mean that it will overwrite the previously set value.

    MDN---abbreviation attribute of CSS

    When the -webkit-background-clip attribute is written after the background attribute, -webkit-background-clip overrides the default value, so it works. On the contrary, just the opposite.

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:28:12

    The last one recognized is the valid one. No matter which attribute is the same.
    So, be sure to write what you want to keep at the end.

    reply
    0
  • Cancelreply