zoukankan      html  css  js  c++  java
  • 元素的content属性

    content这个css属性被用于before和after这两个伪元素去产生放在元素内的内容。而所有元素都可以用content这个属性的url()值和其他的图片值用于替换元素本身的内容。用content属性被插入的对象是匿名的替换对象。

    content有如下几种值:

    1、content: normal;

    2、content: none;

    以上这两种值不能和其他的值一起用。其他的值可以同时混用,如:content: open-quote counter_name;

    3、content: url("http://www.example.com/test.png");

    这种url值可以替换所有元素本身已经有的内容。

    eg: <div class="example">hahaha</div>

    .example {

      content: url("http://www.baidu.com/test.png");

    }

    原本的内容hahaha被替换成了链接上的图片。(个人感觉只是content的内容把原来的内容覆盖了)

    4、content: linear-gradient(#e66465, #9198e5);

    这种图片属性的值和url值一样可以替换所有元素本身已经有的内容。

    eg: <div class="example">hahaha</div>

    .example {

      content: linear-gradient(#e66465, #9198e5);

    }

    原本的内容hahaha被渐变色充满整个元素。

    以下这些属性值只适用于before和after伪元素:

    5、content: "放任意的字符串";

    eg: content: "hello";

    6、content: counter(counter_name);

    7、content: attr(HTML attribute name);

    eg: <div class="example" test="123">hahaha</div>

    .example:before {

      content: attr(test);

    }

    原本的内容hahaha被属性test的值123覆盖。

    8、content: open-quote; 前影号

      content: close-quote;后影号

      content: no-open-quote;不要前影号

      content: no-close-quote;不要后影号

    (emmm,个人还不太明白这个不要前后影号是要干啥。。。)

    9、一些全局值,也不太明白是用来干啥的

    content: inherit;

    content: initial;

    content: usnet;

  • 相关阅读:
    1月19日
    1月18日
    1月17日
    读后感(1)
    UIAlertView
    plist
    jQuery validation
    HTML <a href >标签的target属性
    HTML DOM
    .与..的区别
  • 原文地址:https://www.cnblogs.com/coconutGirl/p/9554663.html
Copyright © 2011-2022 走看看