css 如何使用ATTR给网站上的图片添加标签？

llmtgqce 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(162)

我想附加一个标签的图像在我的网站上，所以我用了下面的CSS和HTML代码。
CSS：

/* Image */
.image {
  border: 0;
  display: inline-block;
  position: relative; }
.image::after {
  content: "Photo credit: Me"; 
  position: absolute; 
  bottom: 0; 
  right: 3em; 
  font-size: 0.7em; 
  color:rgba(0, 0, 0, 0.175)}
  .image img {
    display: block; }
  .image.left, .image.right {
    max-width: 30%; }

超文本：

<div class="row">
  <p> 
    <span class="image left">
      <img src="images/image_1.png">
    </span>
  </p>
</div>

上面的代码工作完美，但我不想总是显示"图片来源：我"。相反，我想设置"照片来源：Me "作为默认文本，但在指定时显示不同的文本。我尝试使用attr，如下所示：
一个二个一个一个
然而，这段代码并没有在图像上显示任何东西。我做错了什么？
注意：我使用的是从https://html5up.net/editorial下载的模板。有可能是CSS中其他地方定义的一些属性导致了这个问题...

css

来源：https://stackoverflow.com/questions/74831360/how-to-add-a-label-to-images-on-website-using-attr

1条答案

按热度按时间

ccrfmcuu1#

首先，你应该把数据内容放在span上，因为class .image在span上。第二，直到2022-12-17，浏览器只支持基本的attr（）方法，没有人支持fallback特性。如果你想实现fallback特性，你可以使用var来解决。
请检查以下代码： CSS

/* Image */
.image {
  border: 0;
  display: inline-block;
  position: relative; 
}
.image[data-content] {
    --test : attr(data-content); /* if image have data-content, then we defined the variable test) */
}
.image::after {
  content:  var(--test, "Photo credit: Me"); /*if var test not be define, we use default value  */
  position: absolute; 
  bottom: 0; 
  right: 3em; 
  font-size: 0.7em; 
  color:rgba(0, 0, 0, 0.175)}
  .image img {
    display: block; }
  .image.left, .image.right {
    max-width: 30%; }

超文本标记语言

<div class="row">
  <p> 
    <span class="image left"  data-content="Photo credit: Others">
      <img src="images/image_1.png">
    </span>
  </p>
</div>

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何使用ATTR给网站上的图片添加标签？

1条答案

相关问题

热门标签

最新问答