<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景颜色</title><style>.box{width: 100px; /*背景宽度*/height: 100px; /*背景高度*/background-color: #f00; /*用于给元素设置背景颜色*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>
下面是效果图：
图一
注意：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景图片</title><style>.box{width: 1000px; /*给图片加宽度*/height: 1000px; /*给图片加高度*/background-image: url(图片地址); }</style>
</head>
<body><div class="box"></div>
</body>
</html>
效果图如下
background-image 用于给元素设置背景图片，图片的地址一定放在 url(图片地址)，但是这个元素要么有内容，要么有宽度和高度才可以，背景图片默认是平铺的
图二
... ...
<body><img src="图片地址">/*这个也是插入图片，但是仅仅只是插入图片，不是设置背景图片*/<div class="box"></div>
</body>
... ...
图三
上图是img标签的效果，可以看到就是插入一张图拍，并不是设置背景图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景图片平铺</title><style>.box{width: 1000px; /*给图片加宽度*/height: 1000px; /*给图片加高度*/background-image: url(图片地址);background-repeat: repeat; /*表示图片是平铺的*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>
效果如图二所示
... ...background-image: url(图片地址);border:1px solid #f00; /*设置一个边框*/background-repeat: repeat-x; /*表示图片是水平方向平铺的*/}</style>
... ...
效果如下：
background-repeat: repeat-y; /*表示图片是垂直平铺的*/
垂直平铺效果：
background-repeat: no-repeat; /*表示图片是没有平铺的*/
效果如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景图片平铺</title><style>.box{/*给div设置参数*/width: 1000px; height: 600px;border: 1px solid #000;margin-right: auto;margin-left: auto;/*插入一张图片*/background-image: url(图片地址);background-repeat: no-repeat; /*设置图片不平铺*/background-position: right/*<--水平位置*/ top/*<--垂直位置*/; /*背景图片位置 使用英文单词来表示*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>
效果图：
background-position 用于设置背景图片的位置。如果要设置背景图片的位置，这个属性就会有两个值
background-position水平位置、垂直位置，这两个位置的表示方式有三种 ：英文单词、固定值、百分比
英文单词的表示方式水平位置：left(居左)、 center(居中) 、right(居右) 垂直位置：tou(居上)、 center(居中) 、bottom(居下)
固定值的表示如下：
background-position: 100px 100px; /*背景图片位置 使用固定值来表示*/
效果图如下，图片的左上定点距上面的线和它左面的线距离是我们设置的100px
百分比的表示效果如下：
效果如下：
以上三种位置的表示方式是可以混合使用的
cssbackground-position: 100px top; /*背景图片位置 使用混合方式来表示*/
效果如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景图片平铺</title><style>.box{/*给div设置参数*/width: 1000px; height: 600px;border: 1px solid #f00;margin-right: auto;margin-left: auto;background:#ccc url(图片地址) no-repeat center center; }</style>
</head>
<body><div class="box"></div>
</body>
</html>
效果如下：
本文发布于:2024-01-31 17:13:58，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170669244030109.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
