css文字溢出打点展示、背景图片

Love The Way You Lie 2022-05-13 10:00 270阅读 0赞

**1.单行文本 **

white-space：nowrap；空白部分不换行

overflow：hidden；溢出部分隐藏

text-overflow：ellipsis；文字溢出部分，打点展示

**2. 多行文本**

height = line-height的几倍；就是展示几行文字。

**3. 背景图片**

通常建议使用这个复合属性background，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

**复合属性background：\#00FF00 url(bgimage.gif) no-repeat fixed top;**

（1）background-color：背景颜色

（2）background-image：背景图片；background-image: url();

（3）background-repeat：图片是否重复；

<table> 
 <tbody> 
  <tr> 
   <td>repeat</td> 
   <td>默认。背景图像将在垂直方向和水平方向重复。</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>背景图像将在水平方向重复。</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>背景图像将在垂直方向重复。</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>背景图像将仅显示一次</td> 
  </tr> 
 </tbody> 
</table>

（4） background-attachment：背景是否固定；

<table> 
 <tbody> 
  <tr> 
   <td>scroll</td> 
   <td>默认值。背景图像会随着页面其余部分的滚动而移动。</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>当页面的其余部分滚动时，背景图像不会移动。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 background-attachment 属性的设置。</td> 
  </tr> 
 </tbody> 
</table>

（5）background-position：图片位置

<table> 
 <tbody> 
  <tr> 
   <td> 
    <ul> 
     <li>top left</li> 
     <li>top center</li> 
     <li>top right</li> 
     <li>center left</li> 
     <li>center center</li> 
     <li>center right</li> 
     <li>bottom left</li> 
     <li>bottom center</li> 
     <li>bottom right</li> 
    </ul></td> 
   <td> <p>如果您仅规定了一个关键词，那么第二个值将是"center"。</p> <p>默认值：0% 0%。</p> </td> 
  </tr> 
  <tr> 
   <td>x% y%</td> 
   <td> <p>第一个值是水平位置，第二个值是垂直位置。</p> <p>左上角是 0% 0%。右下角是 100% 100%。</p> <p>如果您仅规定了一个值，另一个值将是 50%。</p> </td> 
  </tr> 
  <tr> 
   <td>xpos ypos</td> 
   <td> <p>第一个值是水平位置，第二个值是垂直位置。</p> <p>左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。</p> <p>如果您仅规定了一个值，另一个值将是50%。</p> <p>您可以混合使用 % 和 position 值。</p> </td> 
  </tr> 
 </tbody> 
</table>

**注意：background-position：0% 0%和50% 50%的效果：**

![70][]                                                       ![70 1][]

下面三个是css3的属性：

（1）background-size：图片大小

![70 2][]

（2）background-clip：图片绘制区域

![70 3][]

（3）background-origin：

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

![70 4][]

[70]: https://img-blog.csdn.net/20180912110445308?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220513/15eb410b427144f091a84e0988e9c463.png
[70 2]: /images/20220513/4c7d9ba92e27451e80cb2770fc4532ed.png
[70 3]: /images/20220513/c900eb5bf56343d89925b84ad3f23531.png
[70 4]: /images/20220513/e60af7f3af654269b3c9a405e97e63bd.png