是否可以设置 <img> 元素的占位符文本的样式？答案

【问题标题】：Is it possible to style the placeholder text of the <img> element?是否可以设置 <img> 元素的占位符文本的样式？
【发布时间】：2017-05-02 07:40:13
【问题描述】：

我正在使用商店图片构建站点 a，尽管有些商店没有可用的图片。我能做的最好的就是使用它的占位符文本来显示商店标题。但是，默认情况下占位符文本位于 div 的左上角并且没有样式。

如何定位占位符文本以设置样式？？

更新

好的，也许我应该提到我正在使用 WordPress。也许使用简单的 PHP if else 语句就足够了？如果存在则显示 img，否则显示我可以添加的 h4 元素。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/7101743/…
这可能超出了您的问题范围，但只是指出使用 JavaScript 您可以在加载图像时创建一个 div 并设置您想要的样式...
当然你应该使用 PHP if-then-else。这样所有问题都消失了
好的。这段代码看起来如何？

标签： php wordpress css sass

【解决方案1】：

将文本放入 a 并设置样式，就像为任何其他 html 元素设置样式一样。

<div class="store-title">
This is where the store name goes.
</div>

如果文本已经在 HTML 元素中，您无法修改，则必须使用现有的类或 id 来连接它并设置样式。

您也可以设置<img> 元素的样式。

【讨论】：

【解决方案2】：

您可以使用line-height 垂直居中：

HTML

<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />

CSS

img.no-image {
  color: red;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
}

JSFiddle 演示：https://jsfiddle.net/ugr6gp8n/2/

这是另一种设置 alt 文本样式的方法，但它仅适用于 Chrome，因此不推荐：

HTML

<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />

CSS

img[title] {
  position: relative;
}

img[title]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: red;
  line-height: 200px;
  text-align: center;
  content: attr(title);
}

JSFiddle 演示：https://jsfiddle.net/cxa37mLd/1/

来源：

【讨论】：

您提供的内联 js 代码似乎对我不起作用。我喜欢这个主意。我用的是WordPress，可能跟这个有关系？？
stackoverflow.com/questions/6949148/… ... stackoverflow.com/questions/37159484/…
如果您在答案中添加信息认为这不起作用，但在 Chrome 上仍然有效，我将撤回我的反对票......如果您这样做，请通知我，所以我不不要错过它

【解决方案3】：

您可以直接在img上设置一些属性的样式：

img {
  color:red;
  font-size:20px;
  text-align:center;
  line-height:200px;
}

&lt;img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/&gt;

【讨论】：

谢谢。但是如何在不移动影响图像本身的情况下更改文本位置？

【解决方案4】：

更新 2

好的，解决了

HTML/PHP：

  <?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>

  <div class="col-xs-12 col-sm-6 col-md-4">
    <a class="store-item-link" href="<?php the_permalink(); ?>">
      <div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
        <?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>

          <h3><?php the_title(); ?></h3>

        <?php else: ?>

          <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">

        <?php endif; ?>
/* Ending here */
      </div>
    </a>
  </div>

  <?php endwhile; endif; ?>

CSS

    h3{
    margin:  0;
    font-weight: bold;
    font-size: 3rem;
    line-height: 175px;
    text-align: center;
  }

这很好，感谢大家的想法。

【讨论】：