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;

  • 相关阅读:
    bugku-web40
    buuctf-BabyUpload
    webpack4系列之 【1. webpack入门】
    webpack Cannot find module 'webpack/schemas/WebpackOptions.json'
    .gitignore无效解决方案以及git rm和rm的区别
    nginx启动或者重启失败,报错nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)
    vue-学习系列之vue双向绑定原理
    mac环境下配置nginx
    杂记
    更换淘宝源
  • 原文地址:https://www.cnblogs.com/coconutGirl/p/9554663.html
Copyright © 2011-2022 走看看