HTML中背景图片如何自适应屏幕
要求就是图片要求自适应屏幕大小,并且图片不能变形
一张清晰漂亮的背景图片能给网页加分不少,怎么做到背景图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。
法一、在<body>中设置:
<body background="images\bg.jpg"
style="background-size:100%;
background-attachment: fixed;">
其中:
background-size:100%是达到窗口的百分百比例
background-attachment: fixed是图片固定,不随着页面滚动而移动
下面给出完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片自适应</title>
<body background="./a3.jpg"
style="background-size:100% 100%;
background-attachment: fixed;">
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
</body>
</html>
保存文件名:背景图片如何自适应屏幕.html
运行效果:
法二、在<body>中设置:
<body style="background-image: url(./a3.jpg);
background-size: 100% ;
background-attachment: fixed;" >
下面给出完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片自适应2</title>
<body style="background-image: url(./a3.jpg);
background-size: 100% ;
background-attachment: fixed;" >
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
</body>
</html>
保存文件名:背景图片如何自适应屏幕2.html
运行效果:
建议采用法二。
附录
HTML的 body 元素(也称为标签)表示文档的内容,此元素包含的属性background 将URI所指向的图片作为背景。此方法不符合规范,请使用 CSS 的 background 属性替代。可参见<body>:文档主体元素 - HTML(超文本标记语言) | MDN
CSS 的background-size 属性指定背景图像大小,以象素或百分比显示,可参见
background-size - CSS(层叠样式表) | MDN
CSS的background-attachment 属性决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动,可参见background-attachment - CSS(层叠样式表) | MDN
CSS的background-image 属性用于为一个元素设置一个或者多个背景图像。可参见background-image - CSS(层叠样式表) | MDN
更多推荐
HTML中背景图片如何自适应屏幕
发布评论