css和图片在网页开发中的应用

Posted 2020-06-22

  现在我有个需求,要求开发一个简单的网页,网页内容只有标题和段落.但是要求标题用图片代替.

  我知道最菜的菜鸟会这么写

<img src="#" alt="标题写这" />
<p>段落</p>

  呵呵,然而img压根就不是标题,很显然,我们的标题还是要写出来的,于是有人会在img外部添加个h1.就像这样

<h1><img src ="#" alt="标题写在这儿" /><h1>

这两种做法都把alt当h1来使用,完全就背离了语义化的原则.

于是有人这么写

<h1><img src="" />我是标题</h1>

这家伙很聪明,知道不能加alt了,不然当图片显示不出来时,就会出现alt的文字和本来的h1标题文字交错.
然而,这也不怎么好的,因为w3c建议你img最好都带alt.

 

 那么,为今之计,我们是否可以考虑样式表呢?

<h1>我是标题</h1>
<p>我是段落</p>

h1 {
  background-image : url(images/xx.gif);
}

 我们用外部样式表,好处是当样式表还未被下载或丢失时,用户也能看到正常的h1标题.

 但是当用户一切正常时,会发现标题和图片叠在一起了.这时候可以用text-indent属性把文字移到外面去.

h1 {
  height : 43px;
  background-image : url(); 
  background-repeat : no-repeat;
  text-indent : -9999px;
}

 设置height的目的是为了h1能够完全显示图片.

  这样,我们的目的就达成了吗?

 可以说基于题目的要求我们达成了目的,但是假如图片下载慢呢,那么就会在标题处暂留一片空白.

为解决这个问题,可以在h1里加span,原因是span是行内元素不会无端占用额外空间.

把图片放在span里,把span撑大;因为h1是他的父元素,h1标题的内容会显示在图片下方;我们只要把图片做得和h1占用的空间一样大就行;

另外图片一定要不透明的!

关于这点读者可以按F12,选择3D视图模式,这样容易发挥层叠样式表的威力.主要css代码如下

h1 {
 position : relative;
width : 389px;
height : 43px; 
overflow : hidden;
font-size : 175%;       /*下面的三行都是为了区分有css没图片和没有css*/
line-height : 43px;
text-transform : uppercase;
}

h1 span {
  position : absolute;
  left : 0;
  top : 0;
  width: 100%;
  height :100%;
  background-image : url(images/title_snow.gif);
  background-repeat : no-repeat;
}

 

把绝对定位嵌入到相对定位 ,那么这个绝对定位的元素就是以这个相对定位的元素来布局.

一般的绝对定位是这样用的，父元素要是相对定位的且须有布局，如有个高度，这样子元素用绝对定位，就可以相对它的父元素进行绝对定位，父元素若不这样做，那么子元素用绝对定位其实是相对body定位。

具体代码见我的github:

https://github.com/xzqhext/art-of-css.git

 

总结: 

需求场景: 含图片的网页怎么写才能具有更好的性能.

解决方案: 1.没CSS情况下,用户可以看到未经任何修饰的网页;

             2.有CSS情况下,用户可以看到更丰富的网页;

             3.为防止图片失效,做两层准备;禁图的用户可以看到好看的文字版;有图的当然可以看到图;