CSS:background-image 和 <img />

1. background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

2.<img src="图片路径" width="175" height="47" alt="" />

<img> 标签有两个必需的属性: src 和 alt。

可选属性

align
  • top
  • bottom
  • middle
  • left
  • right
不推荐使用。规定如何根据周围的文本来排列图像。
borderpixels不推荐使用。定义图像周围的边框。
height
  • pixels
  • %
定义图像的高度。
hspacepixels不推荐使用。定义图像左侧和右侧的空白。
ismapURL将图像定义为服务器端图像映射。
longdescURL指向包含长的图像描述文档的 URL。
usemapURL将图像定义为客户器端图像映射。
vspacepixels不推荐使用。定义图像顶部和底部的空白。
width
  • pixels
  • %
设置图像的宽度。

img是内容部分的东西,css的background-image是修饰性的东西。

img-从页面元素来说,如果是页面中的图片是作为内容出现的

background-image-背景图片,修饰性的内容,在页面中可有可无。有,是为了让页面中视觉感受上更美

在网页中的加载顺序不一样,html中的标签<img/>是网页结构(内容)的一部分会在加载结构的过程中加载,  以css背景图存在的图片background-image会等到dom结构加载完成(网页的内容标签全部显示以后)才开始加载,  既网页会先加载标签<img/>的内容,再加载背景图片background-image。如果你用引入了一个很大的图片,那么在  这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后  ,才开始加载背景图片,不会影响你浏览网页内容。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>My Interactive Web Page</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { text-align: center; color: #333; } p { font-size: 18px; line-height: 1.5; margin-bottom: 20px; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } .button { display: inline-block; padding: 10px 20px; background-color: #333; color: #fff; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; transition: background-color 0.3s ease; cursor: pointer; } .button:hover { background-color: #666; } </style> </head> <body> <div class="container"> <h1>欢迎来到我的网站</h1> <p>这是一个简单的网页,演示了使用HTML、CSS和JavaScript来创建的体验。.</p> <p>单击下面的按钮更改页面的背景色:</p> <button class="button" onclick="changeBackgroundColor()">改变颜色</button> <p>这里是跟多的内容:</p> <ul> <li><a href="http://www.baidu.com" >百度一下,你就知道</a></li> <li><a href="https://www.taobao.com" >淘宝网</a></li> <li><a href="https://weibo.com" >微博</a></li> </ul> </div> <script> function changeBackgroundColor() { var body = document.querySelector('body'); body.style.backgroundColor = getRandomColor(); } function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } </script> </body> </html>,请在此代码中加入更多内容,使网页显示跟丰富
06-13

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值