css中content: " ";是什么意思？有什么用？

html-css010

css中content: " ";是什么意思？有什么用？,第1张

CSS中的content是插入生成的内容，一般与伪元素:befor和:after配合使用。表示在需要的地方插入"."。

content属性的作用及用法：

1、在body中添加两个h标签，如下图所示。

2、在style标签下书写CSS样式，给h标签的伪元素添加content内容，如下图所示。

3、先定义符号，然后添加符号，除了可以运用content添加纯文本内容外，也可以运用它添加文字符号。

4、运用content属性添加图片。

5、content还可以运用其attr获取元素的属性值，如下图所示。

6、综上所述，content属性提供了多种添加内容的方式。

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#abox{

position:relative/*容器相对定位*/

width:300px/*宽度300px*/

margin:0 auto/*横向居中*/

}

#abox img{

width:300px/*宽度300px*/

}

span{

position:absolute/*文字容器绝对定位*/

display:block/*span转为块元素*/

width:100%/*宽度相对于父容器100%*/

text-align:center/*文字居中*/

top:0/*距离父容器顶部0*/

left:0/*距离父容器左侧0*/

color:red/*文字颜色红色*/

font-size:18px/*文字大小既文字高度18px*/

font-weight:bold/*文字加粗*/

}

</style>

</head>

<body>

<div id="abox"><!--容器，相对定位-->

  <img src="123.jpg"><!--图片-->

  <span>我要显示文字</span><!--文字，绝对定位-->

</div>

</body>

</html>