Css的background的详细介绍

最新推荐文章于 2025-11-29 23:22:02 发布

原创最新推荐文章于 2025-11-29 23:22:02 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #JavaScript #ViewUI

本文介绍了一个使用CSS设置背景图片的示例，详细讲解了如何利用CSS的background-image、background-repeat和background-attachment属性来实现背景图片的显示效果，并通过JavaScript进行动态修改。

<!DOCTYPE html>
<html>
<head>
<title>CSS01.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 800px;
height:600px;
background-color: yellow;
}
#d1{
background-image: url(../pic/a.jpg);
background-repeat: no-repeat;/*不重复，就是不铺满啊*/
background-attachment:fixed;/*让图片固定，不要随着滚动条的滚动而出现图片的上下移动*/
}
</style>
</head>
<body>
测试
<div id="d1"></div>
</body>
<script type="text/javascript">
document.getElementById('d1').style['backgroundAttachment'] = 'scroll ';
document.getElementById('d1').style.backgroundImage = 'url(../pic/a.jpg)';
function $(id){return document.getElementById(id);}
$('d1').style.backgroundRepeat = 'no-repeat';
</script>
</html>