<img>要素のプレースホルダテキストのスタイルを設定できますか？

Question

店舗イメージでサイトaを構築していますが、店舗によっては利用可能なイメージがありません。私ができることは、プレースホルダーのテキストを使って店のタイトルを表示することです。ただし、デフォルトでプレースホルダテキストはdivの左上に配置され、スタイルが設定されていません。

プレースホルダテキストのスタイルを設定するにはどうすればよいですか？

UPDATE

[OK]を、多分私はワードプレスを使用していることを言及する必要があります。おそらく単純なPHPを使用してelse文があれば十分でしょうか？それが存在する場合に表示するIMG、私は追加することができ、他のショーH4要素

Answer 1

あなたはimgの一部のプロパティを直接スタイリングすることができます。

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

<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>

Answer 2

とスタイル、それをにテキストを入れて他のhtml要素の場合と同じです。

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

テキストはHTML要素の中にすでにある場合、あなたはそれとスタイル、それをフックする既存のクラスまたはIDを使用する必要があります変更することはできません。

<img>要素のスタイルを設定することもできます。

Answer 3

あなたは中央を縦にする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/

出典：

• Can I style an image's ALT text with CSS?

• Positioning image alt text

• CSS :after not adding content to certain elements

• Why doesn't line-height work on img elements?

Answer 4

UPDATE 2

玉これは

01を解決され

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; 
    } 

これはあなたのアイデアのための素晴らしいと感謝皆を働きました。