在HTML和CSS中使用图像作为分隔符 [英] Using an image as a separator in HTML and CSS

问题描述

我尝试在网页中使用png图片作为分隔符，但它们不显示。我错过了什么吗？如果我不得不放弃图像，你会怎么做呢？非常感谢。

我有以下HTML：

 < TR> 
< td align =center> 
< img class =Separatoralign =centerstyle =width：70％/> 
< / td> 
< / tr> 
  

和以下CSS：

  .Separator {
 background：url（'/ ct / images / L / Separator.png'）; 
 
  

解决方案

c $ c>< hr> 标记就足够了 - JSFiddle演示

HTML

 < p> Lorem ipsum dolor sit ........ rna，quis interdum orci rutrum quis。< / p> 
 
< hr> 
 
< p> Sed m​​ollis urna me ............ imperdiet ac augue。 < / p为H. 
  

CSS：

  hr {
 border：0; 
 height：20px; 
 background：url（http://lorempixel.com/400/200/sports/）0 0; 
} 
  

I'm trying to use png images as separators in a web page but they don't appear. Am I missing something? And if I had to forgo the images how would you do it instead? Many thanks.

I have the following HTML:

<tr>
   <td align="center">
      <img class="Separator" align="center" style="width:70%" />    
   </td>
</tr>

and the following CSS:

.Separator {
   background: url('/ct/images/L/Separator.png');
}

解决方案

Just a regular ol <hr> tag will suffice - JSFiddle Demo

HTML

<p>Lorem ipsum dolor sit........rna, quis interdum orci rutrum quis.</p>

<hr>

<p>Sed mollis urna me............imperdiet ac augue. </p>

CSS:

hr {
    border:0; 
    height:20px; 
    background:url("http://lorempixel.com/400/200/sports/") 0 0; 
}

这篇关于在HTML和CSS中使用图像作为分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！