<style>
.xuelunyan {
margin: 0 auto;
width: 700px;
height: 700px;
border: 1px solid pink;
/* 背景颜色 */
background-color: red;
/* 背景图片 */
background-image: url(../images/写轮眼.jpg);
/* 背景图片不平铺 水平方向平铺repeat-x
垂直方向平铺repeat-y */
background-repeat: no-repeat;
background-size: 700px 700px;
}
/* 背景图片位置 移动背景图片 */
/* 上top 下bottom 中center 左left 右right */
/* backgrounde-position :center center ; */
/* backgrounde-position :left bottom ; */
/* 如果两个值一致只写一个值就可以
background-position:center; */
/* 数值类型 数值+px写法 */
/* 数值一般都是正值 学精灵图时会用到负值 */
/* background-position:20px 40px; */
/* 数值加方位名词 */
/* background-position:right 40px; */
.weizhi {
width: 700px;
height: 700px;
margin: 0 auto;
/* 综合写法可以可以任意的更换顺序 颜色 url地址 平铺 position位置*/
background: blue url(../images/1.jpg) no-repeat center;
}
/* 背景图清晰度低显示依赖于盒子 */
/* img插入图清晰度高 img标签就可以使用 img插入图用在页面的重要的商品图 */
</style>
背景图相关属性
最新推荐文章于 2024-09-12 19:13:21 发布