如何在HTML和CSS中为图片添加版权符号？解决编码显示异常问题

问题核心是CSS的content属性不解析HTML实体，你写的©会被直接当作普通文本输出，所以才显示成了© My Name。

你可以用以下两种方法解决：

方法1：直接写入版权符号 #

直接在CSS的content里输入©符号（确保你的CSS文件编码为UTF-8，避免乱码）：

.image {
  border: 0;
  display: inline-block;
  position: relative; 
}
.image::after {
  content: "© My Name"; /* 直接使用版权符号 */
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.9;
  font-size: 0.7em;
  color:rgba(0, 0, 0, 0.175)
}
.image img {
  display: block;
}

方法2：使用CSS Unicode转义序列 #

将HTML实体的十进制值169转换成十六进制A9，然后用\前缀作为CSS转义：

.image {
  border: 0;
  display: inline-block;
  position: relative; 
}
.image::after {
  content: "\A9 My Name"; /* CSS Unicode转义 */
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.9;
  font-size: 0.7em;
  color:rgba(0, 0, 0, 0.175)
}
.image img {
  display: block;
}

两种方法都能让伪元素正常显示© My Name，任选其一即可。

内容的提问来源于stack exchange，提问作者Ogiad