HTML和CSS是网页开发中必不可少的两个技术,其中图片引用是在网页中使用最广泛的一种素材。下面将介绍如何在HTML和CSS中引用图片的代码。
首先,在HTML中引用图片需要使用img标签,其常用属性如下:
1. src:指定图片的路径(可以是相对路径或绝对路径);
2. alt:设置图片的替代文本,当图片无法显示或被屏幕阅读器读取时会用到;
3. width、height:设置图片的宽度和高度;
4. title:设置图片的标题,鼠标悬停可见。
以下是一个简单的HTML代码示例,展示如何使用img标签来引用图片:
<p>这是一段文字,其中包含了一张图片:</p> <img src="images/example.jpg" alt="这是一张示例图片" width="300" height="200" title="这是一张示例图片">其中,图片路径为“images/example.jpg”,图片的替代文本为“这是一张示例图片”,宽度和高度分别为300和200像素,鼠标悬停时会显示“这是一张示例图片”的标题。 接下来,我们将介绍如何在CSS中引用背景图片。在CSS中,我们可以使用background属性来设置元素的背景,它的常用属性如下: 1. background-image:指定背景图片的路径; 2. background-repeat:指定如何重复显示背景图片; 3. background-position:设置背景图片的起始位置; 4. background-size:设置背景图片的尺寸。 以下是一个简单的CSS代码示例,展示如何使用background属性来引用背景图片:
<style> body { background-image: url("images/bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; } </style>其中,背景图片路径为“images/bg.jpg”,不会在背景中重复显示,起始位置为屏幕中央,将根据屏幕大小等比例缩放以填满整个背景区域。 总之,图片引用是网页开发中常用的技术,简单的HTML和CSS代码可以轻松添加和调整页面中的图片。