本例演示如何向 HTML 页面添加背景图片。
<html>
<body background="background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>
</html>
HTML基础操作:图片显示
下很多人宁愿看少的文字,不愿看多的文字,宁愿看图片,不愿看文字,图片在吸引力上有着天生的优势,所以在网站上建设时,不少运营者会加入大量的图片,那么在添加图片时,我们该怎样添加最好了?
V5建站有如下的建议:
1、图片要与主题有关
图片除了生动活泼对用户有吸引力外,也是为了帮助用户更好的理解网站内容,哪怕其匆匆忙忙的并没有认真阅读完网页上的文字。所以我们配图时,一定要准确理解页面要表达的主旨含义,然后配上相关的通俗易懂的图。
2、图片质量要高
一是指图片要清晰,让人看的不模糊,一是指图片能有画龙点睛的效果,图片本身传达不完善或者不明确的信息,需要文字对图片进行说明,并且为了方便搜索引擎读懂图片内容,html代码也赋予了图片alt标签。
3、图片不能太大,要兼顾网速
我们再浏览一些网站的时候,发现打开速度尤其是图片的加载速度很慢,其有服务器配置及物理硬件过低的原因,更多是网站图片处理问题。网站用图既要保证图片清晰,也要兼顾网页打开速度不会太慢,否则适得其反。
常州网站建设找v5建站(http://www.v5cz.com/),v5建站与你一起建高质量的网站,有7天试用期,用的放心。
看一下这样的效果。这里展示了四张图片,每一个图片都有一个倒影。当鼠标旋转每个图片的时候倒影会消失,并且把图片放大显示。接下来跟着我一起完成这样的效果制作。
·这里展示了一个空白的HTML模板,来设置一下它的背景颜色。
·bargain设置为边距为零,内边距也为零,背景颜色为黑色。
·再添加一个INMAX标签,添加上图片。这个图片当前是没有任何效果的,就直接的展示出来了。
·给图片添加一个样式,设置一个宽度为一百五十像素。这个时候发现这个图片是靠左上角的,设置一个next布局body。
·再设置一下它的高度为一百,根据这个四口来设置高度,宽度也是。现在就可以把它在窗口的页面上进行剧终了。
·再来设置一下它的图片样式。
·order top left,左上角的圆角设置成十像素,右上角也设置成十像素的圆角。
·这个时候遇到一个关键的问题,怎么样去把设置成一个倒影,增加一个倒影?它有这么一个属性,这里有设置一下它的倒影,往下的倒影让倒影离开主要图片的五个像素的间距,间距也就是这里的缝隙。
·再设置一下颜色,这个颜色来设置一个渐变的,这个时候是空白的,这样子就产生了这样的倒影。但是倒影还是太高了一点,可以给透明加一个,如果不够可以继续加,这样子就差不多了,设置成八十暗一点,这样子就有了一个倒影。
·再设置一下鼠标悬停,悬停是没有效果的,可以给英美的标签添加一个鼠标悬停的效果。
·然后是它的放大,放大为一点五倍,这个时候放大缩小是很生硬的,可以在这里加上零点五秒的过渡时间,但倒影还没有消失,希望它的倒影消失一下。
·可以继续设置一下属性,它有一个on set,也就是恢复到默认设置。这个时候再来看一下,再给它添加外发光的效果,这样就出现了这个效果。
·给元素多复制几个,这个时候再来看一下,但它是挨在一起的,可以给元素设置一个外边距,上下为零,左右为十像素,可以设置成五像素。
·这个时候再来看,这个时候会发现后边的一张图片会遮住前面的那张图片,但这不是想要的,可以在over的时候把英美解的元素的层级往上走一下,这样子设置到最高,就展现到最前面,外发光效果还是太小小了点,这样子看起来就好看一些。
·如果图片放大了,最好是把左下角也设置成圆角,也可以这里设置一下。再来看一下,这样子是不是放大的时候全为圆角了。
今天的展示就到这里,谢谢大家。
*请认真填写需求信息,我们会在24小时内与您取得联系。