html网页背景图片设置
【摘要】 添加网站全局背景图片显示：背景图片颜色属性（background-color)设置一种纯色背景，它会覆盖填充素内容。背景图片属性（background-image）这个属性是设置HTML元素背景图片，相当于background属性一样。背景图片属性（background-repeat:）定义图片的平铺模式，默认值为repeat图片在水平和垂直方向重复显示。repeat-x : 图片延x轴水平...
添加网站全局背景图片显示：
背景图片颜色属性（background-color)
设置一种纯色背景，它会覆盖填充素内容。
背景图片属性（background-image）
这个属性是设置HTML元素背景图片，相当于background属性一样。
背景图片属性（background-repeat:）
定义图片的平铺模式，默认值为repeat图片在水平和垂直方向重复显示。
repeat-x : 图片延x轴水平平铺显示
repeat-y: 图片延y轴垂直平铺显示
no-repeat: 图片不平铺
它可以设置百分百%，也可以设置具体长度px
图片滚动显示 （background-attachment:）
默认值为scroll: 随着鼠标滚动而滚动
fixed: 不滚动
实现方法：在sytle样式添加body{}，设置背景图片属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
.huawei {
text-align: center;
text-shadow: 10px 20px 20px pink;
/* background-color: red ; */
}
body {
background: url(5-13050GTF9-50.png) center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="huawei">
<h1 style="color: red;">华为云计算</h1>
<p>华为云用在线的方式将华为30多年在ICT基础设施领域的技术积累和产品解决方案开放给客户</p>
<p> 致力于提供稳定可靠、安全可信、可持续创新的云服务，</p>
<p>做智能世界的“黑土地”，推进实现“用得起、用得好、用得放心”的普惠AI。</p>
<p>华为云作为底座，为华为全栈全场景AI战略提供强大的算力平台和更易用的开发平台。</p>
</div>
</body>
</html>
效果图：
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）