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;

  • 相关阅读:
    关于aspx消除源代码的第一行空行(一步搞定!!!)
    考虑
    一段时间没来园子了
    随便写写
    自考群网站功能说明
    打开一个别人的代码遇到的问题
    i7 4790 z97ar ssd 固态硬盘 装机的一些经历
    我编程遇到的问题,解决方法与大家分享
    学习,学习,还是学习
    准备考试
  • 原文地址:https://www.cnblogs.com/coconutGirl/p/9554663.html
Copyright © 2011-2022 走看看